속성 clientWidth

속성 clientWidth는 요소의 테두리 내부 너비로, padding을 포함하지만, border와 스크롤바는 제외합니다.

구문

요소.clientWidth;

요소의 크기를 구해봅시다:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

코드 실행 결과:

130

요소에 스크롤바가 생기면 콘텐츠의 너비는 스크롤바 너비만큼 줄어듭니다 (약 16px - 브라우저, OS, 장치에 따라 다름). 다음 예시에서 요소의 너비는 예상보다 작을 것입니다:

<div id="elem">이 요소에는 스크롤바가 있습니다.</div>

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
	overflow: scroll;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

코드 실행 결과:

114 (브라우저에 따라 다름)

요소가 숨겨져 있으면 clientWidth는 0이 됩니다:

<div id="elem"></div>

#elem {
	display: none; /* 숨겨진 요소 */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

코드 실행 결과:

0