我通过$(".test")获取到class是test的元素集合,然后通过$(".test").each(function(index ele){ $(ele).css("height") }); 获取到每一个的元素的高度,之后再获取到其中height最大的值,然后进行再次进行遍历,将这个最大的height设置给每一个元素。
代码如下:
//此内容稍后添加到自定义js中
window.onresize = function(){setAdvantageHeight();}
setAdvantageHeight();
/*设置高度 我们的优势*/
function setAdvantageHeight(){
var maxHeight = 0;
var $list = $(".advantage_content");
//clear
$list.each(function(index,ele){
$(ele).attr("style","");
$(ele)[0].offsetwidth;
});
setTimeout(function(){
//getMaxHeight
$list.each(function(index,ele){
var height = parseInt($(ele).css("height").split("p")[0]);
maxHeight = maxHeight>height ? maxHeight:height;
});
//setHeight
$list.each(function(index,ele){
$(ele).css("height",maxHeight);
});
},0);
}
如果我不使用 setTimeout阻断一下,当我重复进行刷新的时候就会出现获取大的height值不正确,并没有加上其中css设置的padding。
我用的是chrome
我在书上看的说的是js调整元素的css属性之后,浏览器会重新渲染网页,那么当我第一次将元素的style设置为""的时候,网页会在我每次设置一个元素之后都重新渲染一遍网页,这样的话我获取到的height就不会有问题,可是为什么还是出了问题?
qq_青枣工作室_0
相关分类