명시적인 CSS 높이가 설정되지 않은 경우 Div의 높이를 얻는 방법은 무엇입니까?

명시적인 CSS 규칙 없이 Div 높이 결정

CSS에 높이가 명시적으로 설정되지 않은 경우 div의 높이를 가져오는 것이 어려울 수 있습니다. 이를 위해 일반적으로 .height() jQuery 메서드가 사용되지만 적절한 기능을 위해서는 기존 CSS 규칙이 필요합니다. 대체 접근 방식은 다음과 같습니다.

jQuery 높이 함수

jQuery는 CSS 높이 규칙 없이도 정확한 높이 측정을 제공할 수 있는 다양한 높이 함수를 제공합니다.

• .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>

출력:

div의 계산된 높이는 div 자체에 표시되어 각 함수의 출력에 대한 자세한 정보를 제공합니다.

위 내용은 명시적인 CSS 높이가 설정되지 않은 경우 Div의 높이를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!