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>

任何想法有什麼不對？

來源

2015-02-07 Filip Cicvarek

爲什麼將「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'); 
});

來源

2015-02-07 21:58:07 Ben

太好了，謝謝。我認爲如果我使用$（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');

來源

2015-02-07 21:40:27 Benjamin

你必須等待DOM爲了準備打電話給你的函數：

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

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

如果它是在調整後的工作，也許這是時間問題。嘗試添加超時：

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

來源

2015-02-07 21:42:05 nanndoj

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

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

回答

相關問題