jQuery .css()가 Safari에서 작동하지 않습니다.

Question

jQuery로 요소의 HEIGHT를 계산하고 같은 값을 다른 요소로 설정하려고합니다. 다음 함수는 처음에는 'height : 0'을 설정하고 브라우저의 크기를 조정 한 후에 만 ​​올바른 값이 설정되는 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> 

어떤 생각 무슨 일이야?

Answer 1

이미지가 거의로드되지 않았지만 측정하려고합니다. 따라서 jQuery의 load method을 사용하면 이미지를로드하기 전에 기다렸다가 측정하려고합니다.

또한 outerHeight가 단위가없는 픽셀 번호 (예 : 100 픽셀이 아닌 100)를 반환하므로 jQuery의 .height() 메서드를 사용할 수 있습니다.이 메서드는 .css()가 아닌 unit-less 픽셀 번호도 허용합니다. 단위.

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()은 "px"접미사가없는 픽셀 수를 반환하지만 CSS height 속성은 단위를 명시 적으로 지정해야합니다. 그래서 당신이 원하는 것을 달성하기 위해 올바른 방법은 다음과 같습니다 어쩌면 그것의, 그것은 크기를 조정 한 후 작동하면

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

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

:

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

Answer 3

당신은 당신의 함수를 호출하기 위해 DOM 대기 위해 준비해야 타이밍 문제. 시간 초과를 추가하십시오 :

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