HTML DOM 요소 clientHeight
❮ 요소 개체예시
패딩을 포함하여 "myDIV"의 높이와 너비를 가져옵니다.
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
아래에 더 많은 예가 있습니다.
정의 및 사용
clientHeight
속성은 패딩을 포함하여 요소의 볼 수 있는 높이를 픽셀 단위로 반환하지만 테두리, 스크롤 막대 또는 여백은 반환하지 않습니다 .
속성 은 clientHeight
읽기 전용입니다.
통사론
element.clientHeight
반환 값
유형 | 설명 |
숫자 | 패딩을 포함한 요소의 볼 수 있는 높이(픽셀 단위) |
clientHeight/clientWidth와 offsetHeight/offsetWidth의 차이점
스크롤바 없이:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
스크롤바 사용:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
브라우저 지원
element.clientHeight
모든 브라우저에서 지원됩니다:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ 요소 개체