속성 clientWidth

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

구문

javascript요소.clientWidth;

예시

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

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

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

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

코드 실행 결과:

javascript130

예시

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

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

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

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

코드 실행 결과:

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

예시

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

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

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

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

코드 실행 결과:

javascript0

같이 보기