jQuery动态改变元素高度
Posted
技术标签:
【中文标题】jQuery动态改变元素高度【英文标题】：jQuery dynamically change element height 【发布时间】：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 初始高度计算，然后在事件函数中使用这些高度？或者可能有另一种方法可以获得相同的结果？
【问题讨论】：
【参考方案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 经验太少了。无论如何，谢谢。以上是关于jQuery动态改变元素高度的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 如何获取到隐藏元素的高度？或者在dom元素可见性改变时能触发个事件也行。