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＆＃39; 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');
});

Answer 2

.outerHeight()返回一个不带＆＃34; px＆＃34;的像素数字后缀，但CSS height属性要求显式指定单位。因此，实现您想要的正确方法是：

$('div.releaseText').css('height', imgHeight + 'px');

Answer 3

你必须等待DOM准备好才能调用你的函数：

$(document).ready(function() {
   setImgHeight();
});

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

如果在调整大小后它正在工作，也许这是一个时间问题。尝试添加超时：

$(document).ready(function() {
      setTimeout(setImgHeight, 100);
});

jQuery .css（）在Safari中不起作用

3 个答案: