jquery 1.8及更高版本，将div的高度设置为与另一个div相同

Question

从Jquery 1.8开始，获取元素的height（）时发生了变化。我有一个CSS div的高度设置为auto，图像内部通过使用％和auto来指定div的高度和宽度），当窗口加载时，我使用Jquery获取元素的高度并在其旁边创建另一个div相同的高度。经过研究，我已经注意到它在CSS设置了由图像设置的新高度之前返回高度。 1.7允许这个，但1.8和以上不会。它是一种解决方法。 这是CSS

#element1{ width:80%; height:auto;} 
#element1 img{width:100%; height:auto};//this allows the image to resize with the page responsively. 

jQuery的...

$(window).ready(
function(){ 
var x = $("#element").height(); 
alert(x); // this would return what the height was dynamically set as by the css in 1.7, but 1.8 returns a small number that i am pretty certain is just the padding added to 0px 
}); 

希望这是有道理的，有人有一个变通。 谢谢

Answer 1

不是听上$(window).load()，这可能会拖延适当的高度分配，直到所有资源已成功加载，你可以听成功加载每个<img>实例，并触发适当的高度计算。

但是因为在你的问题中，你只有一个元素是关于动态设置高度的，所以我减少了我的脚本，而不需要遍历页面上的所有<img>实例。假设你有以下标记：

<div id="element1"> 
    <img ... /> 
</div> 

您可以创建一个新的图像，检查它是否被加载，然后指示jQuery的运行高度的计算和设定时，这样做是一个新的高度：

$(function() { 
    var $img = $('<img />', { 
     'src': $('#element1 img').attr('src') 
    }); 

    $img.load(function() { 
     $('#element2').css('height', $('#element1').height()); 
    }); 
}); 

Answer 2

你的css选择器（＃element1）和你的jquery选择器（'#element'）之间不匹配。首先让它们匹配你html元素上的任何内容。您也可以在暂停时将其封装，以便您的图像有时间完全加载。

$(document).ready(function() { 
    setTimeout(function() { 
     $('#element2').height($('#element1').height()); 
    }, 2000}); 
});