HTML DOM offsetWidth 속성이란?
HTML DOM offsetWidth 속성은 지정된 요소의 전체 너비에 해당하는 숫자 값을 반환합니다. 이 값에는 요소의 패딩(padding), 테두리(border), 그리고 세로 스크롤바가 모두 포함되지만, 바깥 여백인 마진(margin)은 포함되지 않습니다.
offsetWidth는 읽기 전용(read-only) 속성으로, 반환되는 값은 항상 정수 형태의 픽셀(px) 단위입니다. 만약 소수점까지 포함된 정밀한 너비 값이 필요하다면 getBoundingClientRect() 메서드를 활용하는 것이 좋습니다.
문법(Syntax)
HTMLelement.offsetWidth
별도의 매개변수 없이 호출하며, 해당 요소가 화면에서 차지하는 레이아웃 너비를 숫자 값으로 반환합니다.
예제(Example)
아래 예제는 이미지와 컨테이너 div의 너비를 offsetWidth 속성으로 확인하는 코드입니다. 버튼을 클릭하면 각 요소의 너비가 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetWidth</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-offsetWidth</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
<input type="button" onclick="getWidth()" value="이미지 너비 가져오기">
<input type="button" onclick="fitWidth()" value="스크롤바 제거">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function getWidth() {
divDisplay.innerHTML = '패딩 및 테두리를 포함한 위 이미지의 너비: '+imgSelect.offsetWidth;
divDisplay.innerHTML += '<br>패딩 및 테두리를 포함한 컨테이너의 너비: '+containerDiv.offsetWidth;
}
function fitWidth() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
getWidth();
}
</script>
</body>
</html>
출력 결과(Output)
버튼을 클릭하기 전 −
'이미지 너비 가져오기' 버튼을 클릭한 후 −
'스크롤바 제거' 버튼을 클릭한 후 −
참고: offsetWidth와 clientWidth의 차이
offsetWidth는 패딩, 테두리, 스크롤바까지 모두 포함한 요소의 전체 너비를 반환하는 반면, clientWidth는 테두리와 스크롤바를 제외하고 패딩만 포함한 내부 영역의 너비를 반환합니다. 따라서 요소가 화면에서 실제로 차지하는 크기가 필요하면 offsetWidth를, 콘텐츠가 표시되는 내부 공간의 크기가 필요하면 clientWidth를 사용하는 것이 적합합니다.
주의 사항
display:none 상태인 요소나 아직 DOM에 추가되지 않은 요소에 접근하면 offsetWidth는 0을 반환합니다. 동적으로 생성한 요소의 크기를 측정하려면 먼저 문서에 삽입한 후 값을 읽어야 정확한 결과를 얻을 수 있습니다.