동적으로 삽입/생성 된 div의 높이를 가져 오는 방법이 있습니까? 처음에는 display = none, 표시하기 전에?

Question

동적으로 삽입/생성 된 div의 높이를 가져 오는 방법이 있습니까? 표시하기 전에 처음에는 display = none입니까?

Answer 1

망가 display:none 그것은 ..... 그냥 -9999px 정도에 의해 오프셋 절대 위치 요소를 추가합니다. 또는 visibility:hidden을 사용하십시오.

Answer 2

일반적으로 컨테이너의 볼 수있는 영역 외부에 위치 시키면 표시되지 않습니다 (overflow: hidden;).

Answer 3

높이가 css로 설정되어 있으면 $ ('# elemID'). css ('height') 만해야한다고 생각합니다.

Answer 4

필자는 요소에 display : none; 그것은 어떤 높이도 가지고 있지 않다. 하나의 옵션이 공개 설정 사용하는 것입니다 :. 대신 다음 $ ('ELEM')를 사용 숨겨진를 높이()

Answer 5

DOM의 실제 위치에 따라 높이가 영향을받을 수 있으므로 정확한 답변을 제공하는 것은 매우 어렵습니다.

신뢰할 수있는 양식은 display:block과 visibility:hidden을 사용하는 것입니다. 그러나 그것을 보여주기 전에 공간을 차지할 것임을 명심하십시오. 이 경우에 사용할

있어서 절대 보이지 않는 문서 흐름이 갈 수 있도록 숨겨진 .height()

Answer 6

visibility:hidden; 
position:absolute; 

이다. 그래도 콘텐츠를 렌더링하고 display:none이하지 않는 높이를 할당합니다.

Answer 7

스크립트가 실행되는 동안 실제로 브라우저가 DOM을 렌더링하지 않을 것이라고 생각합니다. 적어도 제 경험에는 아닙니다.
필자는 항상 마지막 위치에 요소를 추가하고 측정 한 다음 숨 깁니다.
나는 순간적으로 깜박이는 것을 결코 눈치 채지 못했다. 나는 다른 사람들이 생각하는 것을 알고 싶어합니다. 같은

뭔가 :

jQuery를

var el = $('<div/>', { 
    html: 'hello', 
    css: { 
     padding: '10px' 
    } 
}); 
var height = el.appendTo($(document.body)).height(); 
el.hide(); 

일반

var el = document.createElement('div'); 
el.style.padding = '10px'; 
el.innerHTML = 'hello'; 
document.body.appendChild(el); 
var height = el.clientHeight; 
el.style.display = 'none';