명시적인 CSS 높이 규칙 없이 jQuery에서 요소 높이를 결정하는 방법은 무엇입니까?

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

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

jQuery .height()

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

DEMO

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

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

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

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

라이브용 코드 스니펫 데모

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

위 내용은 명시적인 CSS 높이 규칙 없이 jQuery에서 요소 높이를 결정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!