HTML DOM Element offsetWidth 속성

정의와 사용법

offsetWidth 속성은 요소의 시각적 너비를 픽셀 단위로 반환합니다. 패딩, 박스 사이즈, 스크롤 바를 포함하며, 마진을 제외합니다.

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

참고:CSS 프레임워크教程

offsetParent

모든 블록 요소는 오프셋 부모에 대한 오프셋 값을 보고합니다:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

오프셋 부모는 가장 가까운 비정적 위치를 가진 조상입니다.

불량적인 오프셋 부모가 없다면, 오프셋은 문서 본문에 대해 상대적입니다.

참고:

offsetHeight 속성

offsetParent 속성

offsetTop 속성

offsetLeft 속성

clientTop 속성

clientLeft 속성

clientWidth 속성

clientHeight 속성

인스턴스

예제 1

"myDIV"의 높이와 너비를 패딩과 박스 사이즈 포함하여 가져오기:

const elmnt = document.getElementById("myDIV");
let text = "높이와 패딩 및 박스 사이즈: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

직접 테스트해 보세요

예제 2

clientHeight/clientWidth와 offsetHeight/offsetWidth의 차이

스크롤바 미포함:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

직접 테스트해 보세요

스크롤바 포함:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

직접 테스트해 보세요

문법

element.offsetWidth

반환 값

타입 설명
숫자 요소의 시각적 너비(픽셀로 측정), 내간격, 경계선 및 스크롤바를 포함합니다.

브라우저 지원

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 지원 지원 지원 지원 지원