HTML DOM offsetWidth 속성
예시
패딩 및 테두리를 포함하여 <div> 요소의 높이와 너비를 가져옵니다.
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
offsetWidth 속성은 여백이 아닌 패딩, 테두리 및 스크롤 막대를 포함하여 요소의 표시 가능한 너비를 픽셀 단위로 반환합니다.
"viewable"이라는 단어가 지정되는 이유는 요소의 내용이 요소의 실제 너비보다 넓은 경우 이 속성은 보이는 너비만 반환하기 때문입니다("추가 예제" 참조).
참고: 이 속성을 이해하려면 CSS 상자 모델 을 이해해야 합니다 .
팁: 이 속성은 종종 offsetHeight 속성 과 함께 사용됩니다 .
팁: clientHeight 및 clientWidth 속성을 사용 하여 패딩만 포함하여 요소의 볼 수 있는 높이와 너비를 반환합니다.
팁: 요소에 스크롤바를 추가하려면 CSS overflow 속성을 사용하십시오.
이 속성은 읽기 전용입니다.
브라우저 지원
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
통사론
element.offsetWidth
기술적 세부 사항
| 반환 값: | 패딩, 테두리 및 스크롤 막대를 포함하여 요소의 표시 가능한 너비를 픽셀 단위로 나타내는 숫자 |
|---|
더 많은 예
예시
이 예는 clientHeight/clientWidth와 offsetHeight/offsetWidth의 차이점을 보여줍니다.
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
예시
이 예는 요소에 스크롤바를 추가할 때 clientHeight/clientWidth와 offsetHeight/offsetWidth의 차이점을 보여줍니다.
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";