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

问题描述：

我想通过jQuery来计算元素的高度，并将相同的值设置为另一个元素。以下功能适用于所有浏览器，Safari除外，其中它首先设置“height：0”，并且只有在调整浏览器大小后，才会设置正确的值。jQuery .css（）在Safari中不起作用

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>

任何想法有什么不对？

为什么将“imgHeight”设置为全局变量？为什么不只是用“var”声明它，所以它只是你的“setImgHeight”方法的范围？ – 2015-02-07 21:29:00

什么是HTML的样子？ – 2015-02-07 21:29:56

它没有区别。我首先将变量设置为VAR，这只是尝试不同事物的结果... – 2015-02-07 21:30:16

答

您的图像可能未完全加载，但您正在尝试对其进行测量。因此，使用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'); 
});

太好了，谢谢。我认为如果我使用$（document）.ready（），则在加载图像之前不会调用该函数。此解决方案完美运作。 – 2015-02-07 22:11:55

如果你还发现自己在做更复杂的事情，你可以使用这个非常方便的jQuery插件：https：//github.com/desandro/imagesloaded – Ben 2015-02-07 22:26:05

答

.outerHeight()返回像素数字，没有了“PX”后缀，但CSS height属性要求明确指定单位。因此，要实现你想要什么是正确的做法是：

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

答

你必须等待DOM为了准备打电话给你的函数：

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

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

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

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

您不需要等待DOM，您需要等待图像加载。 – Ben 2015-02-07 22:02:50

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

相关推荐