数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中的 offsetWidth、clientWidth、scrollWidth 和 Height 分别表示什么
在本文中，我们将了解 CSS offsetWidth、clientWidth、scrollWidth 之间的区别，以及 offsetHeight、clientHeight、scrollHeight 之间的区别，因为它们分别返回 HTML 元素的宽度和高度。
CSS offsetWidth、clientWidth 和 scrollWidth
- offsetWidth： CSS offsetWidth 属性是元素的总宽度，包括实际的 宽度、填充、边框 和 滚动条（以像素为单位）。它不包括宽度中的 边距。它是 HTML 元素的外宽度。
- clientWidth： CSS clientWidth 属性返回元素的实际宽度和填充。它不包括边距、边框或滚动条宽度。它是 HTML 元素的内宽度。
- scrollWidth： CSS scrollWidth 属性返回可滚动内容的总宽度，包括填充，但不包括边框、边距、滚动条等。
示例
这是一个示例，我们使用了 HTML DOM 元素 offsetWidth、clientWidth 和 scrollWidth 属性来区分它们。
<html>
<head>
<title>
CSS offsetWidth, clientWidth, scrollWidth
Properties
</title>
<style>
.element {
width: 300px;
padding: 5px;
border: 2px solid rgb(23, 2, 35);
font-size: 2rem;
color: green;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3>
Using the offsetWidth, clientWidth, scrollWidth
CSS properties to get different widths of an
HTML element.
</h3>
<div class="element">
<p class="text">
The width of this div element is 300px.
The left and right padding is 10px.
The left and right border is 5px.
</p>
</div>
<div id="output"> </div>
<script>
let element = document.querySelector('.element');
document.getElementById("output").innerHTML =
"offsetWidth: " + element.offsetWidth
+ "<br>" +
"clientWidth: " + element.clientWidth
+ "<br>" +
"scrollWidth: " + element.scrollWidth;
</script>
</body>
</html>
CSS offsetHeight、clientHeight 和 scrollHeight
CSS offsetHeight、clientHeight 和 scrollHeight 属性与 CSS offsetWidth、clientWidth 和 scrollWidth 属性类似。
- offsetHeight： CSS offsetHeight 属性返回元素的总 高度，包括实际高度、填充和边框。它是元素的外高度。
- clientHeight： CSS clientHeight 属性仅返回实际高度和填充的总和。它是内部高度。
- scrollHeight： CSS scrollHeight 属性返回可滚动内容的高度，包括填充。
示例
这是一个示例，我们使用了 HTML DOM 元素 offsetHeight、clientHeight 和 scrollHeight 属性来区分它们。
<html>
<head>
<title>
CSS offsetHeight, clientHeight, scrollHeight
Properties
</title>
<style>
.element {
height: 100px;
width: 300px;
padding: 10px;
border: 2px solid rgb(23, 2, 35);
font-size: 2rem;
color: green;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<h3>
Using the offsetHeight, clientHeight, scrollHeight
CSS properties to get different heights of an
HTML element.
</h3>
<div class="element">
<p class="text">
The height of this div element is 100px.
The left and right padding is 10px.
The left and right border is 5px.
</p>
</div>
<div id="output"> </div>
<script>
let element = document.querySelector('.element');
document.getElementById("output").innerHTML =
"offsetHeight: " + element.offsetHeight
+ "<br>" +
"clientHeight: " + element.clientHeight
+ "<br>" +
"scrollHeight: " + element.scrollHeight;
</script>
</body>
</html>
结论
在本文中，我们学习并了解了 CSS offsetWidth、clientWidth 和 scrollWidth 属性之间的区别，以获取 HTML 元素的宽度。此外，我们还学习了 CSS offsetHeight、clientHeight 和 scrollHeight 属性之间的区别，这些属性返回 HTML 元素的各种高度。
更新于： 2024年8月9日
6K+ 次浏览
广告