Thuộc tính HTML DOM offsetHeight trả về một số tương ứng với chiều cao của một phần tử bao gồm phần đệm, đường viền và thanh cuộn của phần tử đó chứ không phải phần lề của phần tử đó.
Sau đây là cú pháp -
Trả lại giá trị số
HTMLelement.offsetHeight
Hãy để chúng tôi xem một ví dụ về HTML DOM offsetHeight tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetHeight</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-offsetHeight</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/db2/images/db2-mini-logo.jpg">
</div>
<input type="button" onclick="getHeight()" value="Get height of picture">
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function getHeight() {
divDisplay.innerHTML = 'Height of above picture with padding & border: '+imgSelect.offsetHeight;
divDisplay.innerHTML += '<br>Height of container with padding & border: '+containerDiv.offsetHeight;
}
function fitHeight() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
getHeight();
}
</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 'Lấy chiều cao của hình ảnh' nút -
Sau khi nhấp vào ‘Xóa thanh cuộn’ nút -
Sau khi nhấp vào ‘Xóa thanh cuộn’ nút -
