jQuery 없이 Div의 높이를 얻는 방법은 무엇입니까?

jQuery 없이 Div 높이 가져오기

개발자는 jQuery와 같은 라이브러리에 의존하지 않고 div 요소의 높이를 검색하는 방법을 찾는 경우가 많습니다. . jQuery의 .height() 메소드가 일반적으로 인용되지만 동일한 작업을 효과적으로 수행할 수 있는 일반 JavaScript 솔루션이 있습니다.

jQuery의 .height()에 대한 대안

JavaScript를 통해서만 div의 높이를 결정하는 경우 개발자는 div를 나타내는 HTMLElement 객체의 clientHeight 또는 offsetHeight 속성을 활용할 수 있습니다. 각 속성의 작동 방식은 다음과 같습니다.

• clientHeight: 이 속성은 테두리와 스크롤 막대를 제외한 패딩을 포함하여 div에 표시되는 콘텐츠의 높이를 측정합니다.
• offsetHeight: 이 속성은 전체 높이를 반환합니다. 패딩, 스크롤바, 테두리를 포함한 div의 높이.

구현

clientHeight를 사용하여 div의 높이를 검색하려면 다음 구문을 사용하세요.

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

또는 측정에 스크롤 막대와 테두리를 포함하려면 offsetHeight를 사용할 수 있습니다.

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

예

다음은 다음 예입니다. 두 속성의 사용을 보여줍니다.

<code class="html"><div id="myDiv" style="height: 100px; padding: 20px; border: 10px solid black;">
    Content
</div></code>

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

이 예에서 clientHeight는 패딩과 테두리를 제외하기 때문에 80px를 반환하는 반면, offsetHeight는 div의 높이에 기여하는 모든 요소를 ​​포함하여 130px을 반환합니다.

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