clientHeight
clientHeight cung cấp số đo chiều cao của một phần tử bao gồm cả phần đệm. Lưu ý rằng đường viền, lề và chiều cao thanh cuộn (nếu được chỉnh sửa) không được bao gồm trong phần này.
offsetHeight
offsetHeight cung cấp số đo chiều cao của một phần tử bao gồm phần đệm dọc, đường viền trên và dưới. Ký quỹ không được bao gồm ở đây.
scrollHeight
scrollHeight cung cấp số đo chiều cao của một phần tử bao gồm phần đệm dọc và nội dung không hiển thị trên màn hình do thuộc tính tràn của phần tử đó.
Các ví dụ sau minh họa clientHeight, offsetHeight và scrollHeight.
Ví dụ (clientHeight)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
margin-top: 10px;
height: 200px;
width: 200px;
overflow: auto;
margin: 20px;
}
#demo {
height: 250px;
padding: 20px;
background-color: beige;
border: 2px ridge red;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Client Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.clientHeight;
document.getElementById ("display").innerHTML = "Client Height is " + y + "px";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ (offsetHeight)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
height: 180px;
width: 180px;
overflow: auto;
margin: 20px;
}
#demo {
height: 220px;
padding: 20px;
background-color: cornflowerblue;
border: 10px ridge red;
color: white;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Offset Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.offsetHeight;
document.getElementById ("display").innerHTML = "Offset Height is " + y + "px";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ (scrollHeight)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
margin-top: 10px;
height: 200px;
width: 200px;
overflow: auto;
margin: 20px;
}
#demo {
height: 400px;
padding: 20px;
background-color: bisque;
border: 1px solid green;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Scroll Height</button>
<div id="parent">
<div id="demo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.scrollHeight;
document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
