Thuộc tính HTML DOM offsetTop trả về một số tương ứng với vị trí trên cùng của phần tử được chỉ định so với phía trên cùng của phần tử mẹ.
Sau đây là cú pháp -
Trả về giá trị số tính bằng pixel (px)
HTMLelement.offsetTop
Ở đây, giá trị trả về tương ứng với -
- Vị trí trên cùng và lề của phần tử được chỉ định
- Phần đệm trên cùng, thanh cuộn, đường viền và lề của phần tử mẹ
Hãy để chúng tôi xem một ví dụ về HTML DOM offsetTop tài sản -
Ví dụ
<!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() gets the computed 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> Đầu ra
Trước khi nhấp vào bất kỳ nút nào -
Sau khi nhấp vào ‘ Nhận offsetTop Nút '-
