offsetWidth 속성

속성 offsetWidth는 요소의 전체 너비를 포함합니다(요소 자체 너비, 테두리 너비, 내부 여백, 스크롤바 포함):

문법

javascript요소.offsetWidth;

예시

요소의 전체 크기를 알아봅시다:

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

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

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

코드 실행 결과:

javascript150

예시

요소가 숨겨져 있으면 offsetWidth는 0입니다:

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

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

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

코드 실행 결과:

javascript0

함께 보기