jQuery .css() 在 Safari 中无法运行

Question

我正在尝试通过 jQuery 计算元素的高度并将相同的值设置为另一个元素。以下函数适用于所有浏览器，但在 Safari 中除外，它首先设置“height:0”，并且只有在调整浏览器大小后，才会设置正确的值。

setImgHeight = function(){
    window.imgHeight = $('.releaseCDinfo img').outerHeight();
$('div.releaseText').css('height', imgHeight )
    };


setImgHeight();
$(window).resize(function(){
setImgHeight();
});

HTML

<div>

<h2>Latest<br><span>Release</span></h2>

<div class="flex releaseCDinfo">

<img src="assets/img/covers/cover-boy.jpg">

<div class="releaseText">
    <h3>Boy</h3>
    <p>Lorem ipsum</p>
</div>

知道哪里出了问题吗？

Answer 1

您的图像可能未完全加载，但您正在尝试对其进行测量。所以使用 jQuery 的 load method在您尝试测量之前，它将等到图像加载完毕。

另外，因为 outerHeight 返回一个没有单位的像素数(例如 100，而不是 100px)，你可以使用 jQuery 的 .height() 方法，它也接受一个没有单位的像素数，而不是需要一个单位的 .css() .

var setImgHeight = function(img, text){
    var imgHeight = $(img).outerHeight();  
    $(text).height(imgHeight);  
};


$('.releaseCDinfo img').load(function() {
     setImgHeight('.releaseCDinfo img','div.releaseText');
});

$(window).resize(function(){
     setImgHeight('.releaseCDinfo img','div.releaseText');
});