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});
});

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

2 个答案: