jQuery的动态改变元件高度(jQuery dynamically change element

我工作的流动布局项目。我有一些固定高度的DIV我的文档中，并且高度是所有的人都不同。我需要按比例改变浏览器的尺寸调整这些div高度。这里是标记。

<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>

听起来很简单！主要条件是，我不知道目标的DIV及其ID的precize量 ，这就是为什么我使用。每个（函数（））。下面是剧本我写的：

$(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); 
});

}）;

当用户重新加载页面此脚本完美的作品。我怎样才能得到相同的结果dinamically，当用户改变浏览器无需重新加载？我知道我应该申请$（窗口）.resize事件侦听器。但问题是，DIV的起始高度将在活动内部计算，结果会像almoust无尽的环 - 即最终高度将增加或巨大的进展减少。我不需要这样！我怎样才能让每一个 DIV事件功能之外初始高度计算，然后使用事件函数内这些高度？或者可能是有另一种形式给出，以获得相同的结果？

Answer 1:

你需要存储每个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);
  });
});

Answer 2:

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

$(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); 
   });
}

Answer 3:

看一看，你可以使用jQuery绑定resize事件

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

Answer 4:

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

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

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

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

希望这可以帮助

文章来源: jQuery dynamically change element height