資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究理解 CSS 中的 clientHeight、offsetHeight 和 scrollHeight 屬性
要獲取元素的高度、可滾動高度以及包含內邊距、邊框和捲軸的高度，可以使用以下屬性：
clientHeight − clientHeight 給出的是元素高度的度量，包括內邊距。請注意，邊框、外邊距和捲軸高度（如果呈現）不包含在內。
offsetHeight − offsetHeight 給出的是元素高度的度量，包括垂直內邊距、頂部和底部邊框。此處不包括外邊距。
scrollHeight − scrollHeight 給出的是元素高度的度量，包括垂直內邊距和由於 overflow 屬性而螢幕上不可見的內容。
以下示例說明了 clientHeight、offsetHeight 和 scrollHeight。
clientHeight 屬性
clientHeight 給出的是元素高度的度量，包括內邊距。請注意，邊框、外邊距和捲軸高度（如果呈現）不包含在內。此處，元素高度使用 clientHeight 屬性顯示。單擊按鈕後，將呼叫以下函式並計算高度：
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.clientHeight;
document.getElementById ("display").innerHTML = "Client Height is " + y + "px";
}
示例
讓我們看看這個例子：
<!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>
offsetHeight 屬性
offsetHeight 給出的是元素高度的度量，包括垂直內邊距、頂部和底部邊框。此處不包括外邊距。此處，偏移高度使用 offsetHeight 屬性顯示。單擊按鈕後，將呼叫以下函式並計算高度：
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.offsetHeight;
document.getElementById ("display").innerHTML = "Offset Height is " + y + "px";
}
示例
這是一個例子：
<!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>
scrollHeight 屬性
scrollHeight 給出的是元素高度的度量，包括垂直內邊距和由於 overflow 屬性而螢幕上不可見的內容。此處，高度使用 scrollHeight 屬性顯示。單擊按鈕後，將呼叫以下函式並計算高度：
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.scrollHeight;
document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px";
}
示例
讓我們看看這個例子：
<!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>
更新於：2024年1月2日
2K+ 次瀏覽
廣告