clientHeight
和 scrollHeight
是用于获取元素的高度的属性,但它们有一些区别:
clientHeight
用于获取元素的可见区域的高度,即不包括溢出部分。它包含元素的内部高度和内边距,但不包括边框和外边距。
scrollHeight
用于获取元素内容的总高度,包括溢出部分。它包含元素的内部高度、内边距和溢出内容的高度,但不包括边框和外边距。
换句话说,clientHeight
表示了元素的可见区域的大小,而 scrollHeight
表示了元素内容的实际高度,即使内容溢出也会被计算在内。
另外,clientHeight
和 scrollHeight
的值都是以像素为单位的整数。需要注意的是,这些属性只适用于块级元素和内联块元素,对于非可滚动的行内元素,它们的值可能不准确或无效,并且在获取之前要确保元素已经渲染。
废话不多说,直接上代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollHeight equals clientHeight Example</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid #ccc;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<p>这是一个没有内容溢出的示例文本。</p>
<p>这是一个没有内容溢出的示例文本。</p>
<p>这是一个没有内容溢出的示例文本。</p>
<p>这是一个没有内容溢出的示例文本。</p>
</div>
<script>
const container = document.querySelector('.container');
console.log('scrollHeight:', container.scrollHeight);
console.log('clientHeight:', container.clientHeight);
</script>
</body>
</html>
- 比如上面代码scrollHeight获取的是可滚动范围的高度 ,而clientHeight高度就为可视高度100
- 将上面代码的height: 100px;注释或删除掉,再次打印,此时打印的scrollHeight和clientHeight就是相等的了