HTML DOM offsetTop 속성이란?
HTML DOM의 offsetTop 속성은 지정된 요소의 상단 위치가 부모 요소의 상단 경계로부터 얼마나 떨어져 있는지를 나타내는 숫자 값을 반환합니다. 반환되는 값은 픽셀(px) 단위로 계산되며, 요소의 위치를 동적으로 파악하거나 스크롤 위치를 계산해야 하는 다양한 상황에서 유용하게 활용됩니다.
참고로 offsetTop 속성은 읽기 전용(read-only)이므로 직접 값을 설정할 수 없으며, 값을 조회하는 용도로만 사용할 수 있습니다.
문법(Syntax)
offsetTop 속성의 기본 문법은 다음과 같으며, 픽셀(px) 단위의 숫자 값을 반환합니다.
HTMLelement.offsetTop
반환되는 값에는 아래 항목들이 모두 포함됩니다.
- 지정된 요소 자체의 상단 위치(top position)와 상단 마진(margin)
- 부모 요소의 상단 패딩(padding), 스크롤바(scrollbar), 보더(border), 그리고 마진(margin)
예제(Example)
아래 예제는 HTML DOM offsetTop 속성을 사용하여 폼(form) 요소의 상단 오프셋 값을 가져오고, 부모·자식 요소의 CSS 스타일 정보와 함께 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetTop</title>
<style type="text/css">
#picForm {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
}
</style>
</head>
<body>
<form id="picForm">
<fieldset>
<legend>HTML-DOM-offsetTop</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/compiler_design/images/compiler-design-mini-logo.jpg">
</div>
<input type="button" onclick="getHeight()" value="Get offsetTop">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var picForm = document.getElementById("picForm");
var containerDiv = document.getElementById("containerDiv");
function getHeight() {
// window.getComputedStyle()로 계산된 CSS를 가져옵니다
var style = window.getComputedStyle(picForm);
var style2 = window.getComputedStyle(document.body);
divDisplay.innerHTML = 'Top Offset of form: '+picForm.offsetTop+'px';
divDisplay.innerHTML += '<br>Top position of Child(form): '+style.Top;
divDisplay.innerHTML += '<br>Top margin of Child(form): '+style.marginTop;
divDisplay.innerHTML += '<br>Top padding of Parent(body): '+style2.paddingTop;
divDisplay.innerHTML += '<br>Top border of Parent(body): '+style2.borderTopWidth;
divDisplay.innerHTML += '<br>Top margin of Parent(body): '+style2.marginTop;
}
</script>
</body>
</html>
실행 결과(Output)
버튼을 클릭하기 전의 초기 화면은 다음과 같습니다.
'Get offsetTop' 버튼을 클릭하면 폼 요소의 상단 오프셋 값과 함께, 자식 요소(form)의 top 위치 및 마진, 부모 요소(body)의 패딩·보더·마진 값이 아래와 같이 화면에 출력됩니다.
