HTML DOM 요소 clientWidth 속성

정의와 사용법

clientWidth 속성은 요소의 시각적 너비를 반환하며, 내간격 포함, 경계선, 스크롤, 외간격을 제외하고 픽셀로 계산.

clientWidth 속성은 읽기 전용입니다.

다른 참고 사항:CSS 레이아웃 모델 튜토리얼

다른 참고 사항:

clientHeight 속성

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

예제 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.clientWidth

반환 값

형식 설명
숫자 요소의 시각적 너비(픽셀로 계산), 내간격 포함.

브라우저 지원

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

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원 지원