数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告