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

Question

从 Jquery 1.8 开始，在获取元素的 height() 时进行了更改。我有一个 CSS div 高度设置为自动，其中的图像通过使用 % 和 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

您可以在每个<img> 实例上成功加载并触发正确的高度计算，而不是监听$(window).load()，这可能会在成功加载所有资源之前停止正确的高度分配。

但是，由于在您的问题中您只有一个元素需要动态设置高度，因此我已经减少了脚本，而无需遍历页面上的所有 <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});
});