정의된 CSS 높이 규칙 없이 Div의 높이를 얻는 방법은 무엇입니까?

정의되지 않은 CSS 높이 규칙을 사용하여 Div의 높이를 검색하는 방법

명시적인 CSS 높이 규칙 없이 요소의 높이를 결정하는 것은 다음과 같습니다. 도전적이다. 하지만 jQuery JavaScript 라이브러리에서 제공하는 메서드를 사용하면 가능합니다.

jQuery .height 메서드

원래 가정과 달리 jQuery .height() 메서드는 미리 정의된 CSS 높이 규칙이 필요하지 않습니다. 현재 스타일을 고려하여 요소의 계산된 높이를 검색합니다. 이 방법은 기본적으로 패딩, 테두리, 여백을 제외합니다.

기타 옵션

.height() 외에도 다음 방법을 사용할 수도 있습니다.

• .innerHeight(): 안쪽 여백은 포함하고 테두리와 여백은 제외한 높이를 반환합니다.
• .outerHeight(): 테두리와 여백은 제외한 높이를 반환합니다. 여백 제외.
• .outerHeight(true): 여백을 포함한 높이를 반환합니다.

예

다음 HTML 및 jQuery 코드:

<code class="html"><div id="heightTest"></div>

<script>
  $(function() {
    var $heightTest = $('#heightTest');
    $heightTest.html('This is the test div.');

    console.log('Height (.height() returns): ', $heightTest.height());
    console.log('Inner Height (.innerHeight() returns): ', $heightTest.innerHeight());
    console.log('Outer Height (.outerHeight() returns): ', $heightTest.outerHeight());
    console.log('Outer Height (.outerHeight(true) returns): ', $heightTest.outerHeight(true));
  });
</script></code>

출력:

Height (.height() returns): 18px
Inner Height (.innerHeight() returns): 56px
Outer Height (.outerHeight() returns): 58px
Outer Height (.outerHeight(true) returns): 88px

결론

jQuery 메서드는 편리한 CSS 높이 규칙이 정의되었는지 여부에 관계없이 요소의 높이를 검색하는 방법입니다. 이 기능은 동적 웹 구성 요소 및 레이아웃 조정에 유용합니다.

위 내용은 정의된 CSS 높이 규칙 없이 Div의 높이를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!