jQuery动态改变元素高度答案

【问题标题】：jQuery dynamically change element heightjQuery动态改变元素高度
【发布时间】：2012-06-19 09:45:00
【问题描述】：

我正在做一个流畅的布局项目。我的文档中有一些固定高度的 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，这就是我使用 .each(function()) 的原因。这是我写的脚本：

$(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 的初始高度将在事件内部计算，结果几乎就像无限循环 - 即最终高度将在巨大的进程中增加或减少。我不需要那个！如何在事件函数之外进行 each DIV 初始高度计算，然后在事件函数中使用这些高度？或者可能有另一种方法可以获得相同的结果？

【问题讨论】：

标签： jquery height window-resize

【解决方案1】：

看看可以用jquery绑定的resize事件

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

【讨论】：

【解决方案2】：

结束您的调整大小功能并订阅窗口调整大小事件。

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

【讨论】：

【解决方案3】：

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

【讨论】：

真正快速简便的解决方案。完美运行。谢谢！

【解决方案4】：

使用 .data 将 div 的初始大小存储在 $.each 函数中

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

您可以稍后在调整大小回调中检索旧尺寸

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

希望对你有帮助

【讨论】：

无法使用 .data 使其工作。但这可能是我的错，我的 JavaScript 经验太少了。无论如何，谢谢。