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

Linda Hamilton
풀어 주다: 2024-11-01 02:41:28
원래의
382명이 탐색했습니다.

How to Get the Height of a Div Without a Defined CSS Height Rule?

정의되지 않은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!