>웹 프론트엔드 >JS 튜토리얼 >순수 JavaScript에서 Div의 높이를 얻는 방법: clientHeight 대 offsetHeight

순수 JavaScript에서 Div의 높이를 얻는 방법: clientHeight 대 offsetHeight

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-05 13:00:05333검색

How to Get a Div's Height in Pure JavaScript: clientHeight vs. offsetHeight

순수한 JavaScript로 Div의 높이를 얻는 방법

jQuery를 통합하지 않고 div의 높이를 얻으려는 경우 이 간결한 가이드를 참조하세요. 필요한 JavaScript 솔루션을 제공합니다.

JavaScript로 Div 높이 가져오기

jQuery의 .height() 메소드를 사용하는 것이 널리 사용되는 접근 방식이지만 일반 JavaScript도 마찬가지로 효과적입니다. 행동 양식. 예를 들어 clientHeight 또는 offsetHeight 속성을 활용할 수 있습니다.

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>

또는 offsetHeight:

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>

속성 차이

    를 사용할 수도 있습니다.
  • clientHeight는 패딩을 포함하지만 테두리와 스크롤 막대는 제외합니다.
  • offsetHeight는 패딩, 테두리 및 스크롤 막대를 포함합니다.

요약하자면, 콘텐츠와 패딩의 결합된 높이가 필요한 경우, clientHeight가 이상적입니다. 모든 주변 요소를 포함한 전체 높이가 필요한 경우 offsetHeight를 사용하세요.

위 내용은 순수 JavaScript에서 Div의 높이를 얻는 방법: clientHeight 대 offsetHeight의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.