HTML DOM offsetWidth 속성

HTML DOM Element 객체

offsetWidth읽기 전용 속성으로 요소의 너비를 포함한 수평 패딩과 프레임을 정수 형식으로 반환합니다.

일반적으로, offsetWidth는 CSS 요소의 너비를 픽셀 단위로 측정하며, 모든 프레임, 패딩 및 수직 스크롤바(만약 있을 경우)를 포함합니다. 이는 가상 요소의 너비를 포함하지 않습니다. 예를 들어,:: before또는:: after.

이 속성을 이해하기 위해서는CSS Box Model.

사용clientHeight및clientWidth속성은 요소의 보이는 높이와 너비를 반환하며, 패딩을 포함하지만, 프레임, 마진 및 스크롤바(만약 있을 경우)를 포함하지 않습니다.

문법:

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Height" + "including" + "padding" + "and" + "border: "　+　elem.offsetHeight　+　"px<br>";
txt　+Padding과 border를 포함한 너비: "Width"　+　elem.offsetWidth　+　"px";

브라우저 호환성

모든 브라우저가 offsetWidth 속성을 완전히 지원합니다:

기술 세부 사항

更多示例

이 예제는 clientWidth와 offsetWidth 간의 차이를 보여줍니다:

var elem = document.querySelector("div");
var txt = "Width 포함 padding: "　+　elem.clientWidth　+　"px<br>";
txt　+= "Width 포함 padding"　+　border: ""　+　elem.offsetWidth　+　"px";

관련 참조

HTML DOM 참조:offsetHeight 속성

HTML DOM 참조:offsetLeft 속성

HTML DOM 참조:offsetTop 속성

HTML DOM 참조:offsetParent 속성

HTML DOM Element 객체