정의된 CSS 높이 없이 div의 높이를 어떻게 확인할 수 있나요?

정의된 CSS 높이 없이 Div의 높이 결정

에 높이 규칙이 설정되지 않은 경우 요소의 높이를 얻는 것이 어려울 수 있습니다. CSS. 높이를 얻기 위한 다양한 jQuery 메서드를 이해하는 것이 중요합니다.

오해와는 달리 jQuery의 .height() 메서드는 정의된 CSS 높이 규칙에 의존하지 않습니다. 요소의 콘텐츠, 패딩 및 테두리를 포함하는 계산된 높이를 결정합니다. 이는 CSS가 명시적으로 지정하는지 여부에 관계없이 요소의 실제 높이를 검색하는 효과적인 도구입니다.

높이 측정 방법

jQuery는 다음과 같은 세 가지 주요 방법을 제공합니다. 요소 높이 측정:

• .height(): 패딩, 테두리 및 여백을 제외한 요소의 높이를 반환합니다.
• .innerHeight(): 패딩은 포함하지만 테두리와 여백은 제외한 요소의 높이를 반환합니다.
• .outerHeight(): 테두리는 포함하지만 여백은 제외된 요소의 높이를 반환합니다. 보다 포괄적인 측정을 위해서는 .outerHeight(true)를 사용하여 여백도 포함하세요.

데모

제공된 코드 스니펫

$(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>')
});

이러한 jQuery 메서드를 이해하면 CSS 높이 규칙이 정의되지 않은 경우에도 요소의 높이를 효과적으로 얻을 수 있습니다.

위 내용은 정의된 CSS 높이 없이 div의 높이를 어떻게 확인할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!