jQuery动态更改元素高度

我正在处理流体布局项目。我的文档中有一些固定高度的DIV，并且它们的高度都不相同。我需要按比例更改浏览器调整大小的DIVs高度。这是标记。jQuery动态更改元素高度

<body> 
<div id="a" class="target"></div> 
<div id="b" class="target"></div> 
<div id="c" class="target"></div> 
</body>

和CSS：

<style> 
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; } 
    #a { height: 200px; background-color: yellow;} 
    #b { height: 400px; background-color: green;} 
    #c { height: 600px; background-color: grey;} 
</style>

听起来容易！主要的条件是我不知道目标DIVs和他们的ID的预缩量，这就是为什么我使用.each（函数（））。这里是剧本我写道：

$(document).ready(function(){ 
//set the initial body width 
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/ 
$(".target").each(function() 
{ 
    //get the initial height of every div 
    var originalHeight = $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 
});

}）;

当用户重新加载页面时，此脚本完美适用。如何在用户重新调整浏览器大小而无需重新加载时获得相同的结果？我知道我应该使用$（window）.resize事件监听器。但问题是DIV的初始高度将在事件内部进行计算，结果会像无尽的循环一样 - 最终的高度会随着巨大的进展而增加或减少。我不需要那个！我怎样才能让每个 DIV初始高度计算以外的事件功能，然后使用这些高度内部事件功能？或者可能有另一种方法得到相同的结果？

来源

2012-06-16 theCoder

您需要存储每个div的原始高度。有不同的方式来做到这一点，这里有一个黑客，将其存储在DOM节点本身（有更好的方法，但这是快速和肮脏的）。

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    /*I need to go through all target divs because i don't know 
    how many divs are here and what are their initial height*/ 


    function resize() { 
    //This will only set this._originalHeight once 
    this._originalHeight = this._originalHeight || $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = this._originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 

    } 

    $(".target").each(resize); 
    $(document).resize(function(){ 
     $(".target").each(resize); 
    }); 
});

来源

2012-06-16 17:45:39

快速简单的解决方案。完美的作品。谢谢！ – theCoder

看看resize事件，你可以使用jQuery

http://api.jquery.com/resize/

来源

2012-06-16 17:40:59 Nir

绑定结束语您调整大小功能和订阅窗口调整大小事件。

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    resizeTargets(); 
    $(window).resize(resizeTargets); 

}); 

function resizeTargets() 
{ 
    $(".target").each(function() 
    { 
     //get the initial height of every div 
     var originalHeight = $(this).height(); 
     //get the new body width 
     var bodyWidth = $("body").width(); 
     //get the difference in width, needed for hight calculation 
     var widthDiff = bodyWidth - originalWidth; 
     //new hight based on initial div height 
     var newHeight = originalHeight + (widthDiff/10); 
     //sets the different height for every needed div 
     $(this).css("height", newHeight); 
    }); 
}

来源

2012-06-16 17:41:00 Gabe

使用。数据存储div的初始大小您的$。每个函数中

$(this).data('height', $(this).height()); 
$(this).data('width', $(this).width());

你以后可以检索调整大小回调

var old_height = $(this).data('height'); 
var old_width = $(this).data('width');

希望中老大小这有助于

来源

2012-06-16 17:46:16

使用.data无法使用它。但这可能是我的错，我有这么小的JavaScript经验。不管怎么说，还是要谢谢你。 – theCoder

jQuery动态更改元素高度

回答

相关问题