CSS 높이 규칙 없이 요소 높이 결정

요소에 CSS 높이 규칙이 없으면 높이를 얻는 것이 어려울 수 있습니다. 그 높이. 사전 정의된 CSS 높이 값이 필요한 jQuery .height() 메서드는 이 시나리오에서는 부적절한 것으로 보입니다. 그러나 요소의 높이를 결정하는 대체 방법이 있습니다.

jQuery .height()

일반적인 믿음과는 달리 jQuery .height()는 의존하지 않습니다. CSS 높이 정의에 대해. 요소의 계산된 높이를 계산하므로 명시적인 CSS 높이가 지정되지 않은 시나리오에 적합합니다.

DEMO

.height(): 요소의 높이를 검색합니다. 안쪽 여백, 테두리 또는 여백 없이.

.innerHeight(): 안쪽 여백은 포함하지만 테두리와 여백은 제외한 요소의 높이를 검색합니다.

.outerHeight(): 테두리는 포함하지만 테두리는 제외한 요소의 높이를 검색합니다. margin.

.outerHeight(true): 테두리와 여백을 모두 포함하여 요소의 높이를 검색합니다.

라이브 데모용 코드 조각

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('
Height (.height() returns) : '   $heightTest.height()   ' [Just Height]
')
    .append('
Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]
')
    .append('
Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]
')
    .append('
Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]
')
});