offsetWidth 속성
속성 offsetWidth는 요소의 전체
너비를 포함합니다(요소 자체 너비,
테두리 너비, 내부 여백,
스크롤바 포함):
문법
요소.offsetWidth;
예시
요소의 전체 크기를 알아봅시다:
<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);
코드 실행 결과:
150
예시
요소가 숨겨져 있으면 offsetWidth는
0입니다:
<div id="elem"></div>
#elem {
display: none; /* 숨겨진 요소 */
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);
코드 실행 결과:
0
함께 보기
-
속성
clientWidth,
테두리 내부 요소 너비를 포함하는 -
속성
offsetHeight,
요소의 전체 높이를 포함하는 -
메서드
getComputedStyle,
요소의 CSS 속성 값을 가져오는
