HTML DOM 요소 clientHeight 속성

정의와 사용법

clientHeight 속성은 요소의 보이는 높이를 반환합니다. 내간격 포함, 테두리, 스크롤 또는 외간격을 제외하고 픽셀为单位입니다.

clientHeight 속성은 읽기 전용입니다。

참조:CSS 프레임워크 튜토리얼

참조:

clientWidth 속성

clientTop 속성

clientLeft 속성

offsetHeight 속성

offsetWidth 속성

요소에 스크롤을 추가하려면 다음을 사용하세요 CSS overflow 속성。

실례

예제 1

"myDIV"의 높이와 너비를(내간격 포함) 가져오기:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

본인이 직접 시도해보세요

예제 2: clientHeight/clientWidth와 offsetHeight/offsetWidth의 차이

스크롤이 없습니다:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

본인이 직접 시도해보세요

스크롤이 있습니다:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

본인이 직접 시도해보세요

문법

element.clientHeight

반환 값

타입 설명
숫자 요소의 보이는 높이(픽셀为单位), 내간격 포함.

브라우저 지원

모든 브라우저가 지원합니다 element.clientHeight：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 지원 지원 지원 지원 지원