jQuery动态更改元素高度 [英] jQuery dynamically change element height
问题描述
我正在做一个流畅的布局项目.我的文档中有一些固定高度的DIV，并且它们的高度都不同.我需要在浏览器调整大小时按比例更改这些DIV的高度.这是标记.
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.
<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())的原因. 这是我写的脚本:
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:
$(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初始高度计算，然后在事件函数内部使用这些高度?还是可能有另一种方法来获得相同的结果?
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 each DIV 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?
推荐答案
您需要存储每个div的原始高度.有多种方法可以做到这一点，这是一种技巧，将其存储在DOM节点本身中(有更好的方法，但这既快捷又肮脏).
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).
$(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);
});
});
这篇关于jQuery动态更改元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
