jQuery jQuery动态改变元素高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11065626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dynamically change element height
提问by theCoder
I'm working on a fluid layout project. I have some fixed height DIVs in my document, and the heights are different for all of them. I need to proportionally change these DIVs height on browser resize. Here is the markup.
我正在做一个流体布局项目。我的文档中有一些固定高度的 DIV，它们的高度都不同。我需要在浏览器调整大小时按比例更改这些 DIV 的高度。这是标记。
<body>
<div id="a" class="target"></div>
<div id="b" class="target"></div>
<div id="c" class="target"></div>
</body>
And css:
和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>
Sounds easy! The main condition is that i don't know the precize amount of target DIVs and their IDs, that's why i'm using .each(function()). Here is script i wrote:
听起来很简单！主要条件是我不知道目标 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);
});
});
});
This script perfectly works when user reload the page. How can i get the same results dinamically, when user resizes browser without reloading? I know i should apply $(window).resize event listener. But the problem is that DIV's initial height will be calculated inside the event and the result will be almoust like endless loop- that is the final height will increase or decrease in huge progression. I don't need that! How can i make eachDIV initial height calculation outside event function and then use these heights inside event function? Or may be there is another aproach to get the same result?
当用户重新加载页面时，这个脚本完美地工作。当用户在不重新加载的情况下调整浏览器大小时，如何动态地获得相同的结果？我知道我应该应用 $(window).resize 事件侦听器。但问题是，DIV 的初始高度会在事件内部计算，结果几乎就像无限循环——即最终高度会在巨大的进展中增加或减少。我不需要那个！如何在事件函数外进行每个DIV 初始高度计算，然后在事件函数内使用这些高度？或者可能有另一种方法来获得相同的结果？
回答by Juan Mendes
You need to store the original height of each div. There are different ways to do it, here's one hack, store it in the DOM node itself (there are better ways, but this is quick and dirty).
您需要存储每个 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);
});
});
回答by Gabe
Wrap up your resize functionality and subscribe to the window resize event.
结束您的调整大小功能并订阅窗口调整大小事件。
$(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);
});
}
回答by Nir
take a look at the resize event that you can bind with jquery
看看你可以用jquery绑定的resize事件
回答by chris_code
use .data to store the initial size of the div inside your $.each function
使用 .data 在 $.each 函数中存储 div 的初始大小
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
you can later retrieve the old sizes within the resize callback
您可以稍后在调整大小回调中检索旧尺寸
var old_height = $(this).data('height');
var old_width = $(this).data('width');
Hope this helps
希望这可以帮助
