CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height 分别是什么

cssweb developmentfront end technology更新于 2024/5/30 7:08:17

阅读本教程的标题后，首先想到的问题是 offsetWidth、clientWidth 和 scrollWidth 都返回 HTML 的宽度，但它们之间有什么区别?

它们之间的区别在于它们在网页上占用的空间大小。在本教程中，我们将了解 HTML 元素的不同宽度和高度。

OffsetWidth、ClientWidth、ScrollWidth

offsetWidth − 元素的总宽度，包括实际宽度、内边距、边框和滚动条(以像素为单位)。它不包括宽度中的边距。它是 HTML 元素的外部宽度。
clientWidth − 它返回元素的实际宽度 + 内边距。它不包括边距、边框或滚动条的宽度。它是 HTML 元素的内部宽度。
scrollWidth − 返回可滚动内容的总宽度，包括内边距 (padding)，但不包括边框 (border)、外边距 (margin)、滚动条 (scrollbar) 等。

语法

用户可以按照以下语法在 JavaScript 中使用 offsetWidth、clientWidth 和 scrollWidth 属性。

element.scrollWidth;
element.clientWidth;
element.scrollWidth;

在上述语法中，元素 (element) 是一个 HTML 元素，我们需要获取其宽度。

示例 1

在下面的示例中，我们创建了 div 元素并添加了文本内容。此外，我们为 div 元素设置了固定宽度，并应用 CSS 使其可水平滚动。

在 JavaScript 中，我们访问了 div 元素，并使用 offsetWidth、clientWidth 和 scrollWidth 属性获取相应的宽度。在输出中，用户可以观察到 offsetWidth 等于 330 像素(300 像素实际宽度 + 10 像素左内边距 + 10 像素右内边距 + 5 像素左边框 + 5 像素右边框)。clientWidth 等于 320 像素，因为它只计算实际宽度和内边距，而不计算边框。scrollWidth 为 1549 像素，用于测量可滚动内容的宽度。

<html>
<head>
   <style>
      .element {
         width: 300px;
         padding: 10px;
         border: 5px solid blue;
         font-size: 2rem;
         color: green;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <h3> Using the <i> offsetWidth, clientWidth, scrollWidth </i> CSS properties to get different widths of an HTML element. </h3>
   <div class = "element">
      <p class="text"> Hello Users! 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>
      var element = document.querySelector('.element');
      var output = document.querySelector('#output');
      output.innerHTML = "offsetWidth: " + element.offsetWidth + "<br>" +
      "clientWidth: " + element.clientWidth + "<br>" +
      "scrollWidth: " + element.scrollWidth;
   </script>
</body>
</html>

示例 2

在下面的示例中，我们将文本内容添加到 div 元素，并使其可水平滚动，就像第一个例子一样。此外，我们还创建了输入字段来获取用户的宽度、内边距和边框宽度。

在 JavaScript 中，我们访问输入值并根据该值设置 HTML 元素的样式。

在输出中，用户可以输入输入值，然后点击"获取宽度"按钮来重新计算元素的宽度。

<html>
<head>
   <style>
      .element {
         width: 300px;
         padding: 10px;
         border: 5px solid red;
         font-size: 2rem;
         color: pink;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <h3> Using the <i> offsetWidth, clientWidth, scrollWidth </i> CSSproperties to get differnt widths of an HTML element </h3>
   <div class = "element">
      PHP is a popular server-side scripting language that is widely used to build dynamic websites and web applications. One of the key strengths of PHP is its ability to interact with databases, making it an ideal language for building content management systems, e-commerce websites, and other database-driven applications.
   </div> <br>
   <div>
      <label for = "width"> Width: </label> <input type = "number" id = "width" value = "300">
      <label for = "padding"> Padding: </label> <input type = "number" id = "padding" value = "10">
      <label for = "border"> Border: </label> <input type = "number" id = "border" value = "5">
   </div>  <br> <br>
   <div id = "output"> </div> <br> <br>
   <button onclick = "getWidths()"> Get widths </button>
   <script>
      var element = document.querySelector('.element');
      var output = document.querySelector('#output');
      function getWidths() {
         var width = document.querySelector('#width').value;
         var padding = document.querySelector('#padding').value;
         var border = document.querySelector('#border').value;
         element.style.width = width + "px";
         element.style.padding = padding + "px";
         element.style.border = border + "px solid red";
         output.innerHTML = "offsetWidth: " + element.offsetWidth + "<br>" +
         "clientWidth: " + element.clientWidth + "<br>" +
         "scrollWidth: " + element.scrollWidth;
      }
      getWidths();
   </script>
</body>
</html>

OffsetHeight, ClientHeight, ScrollHeight

offsetHeight、clientHeight 和 scrollHeight 属性与 offsetWidth、clientWidth 和 scrollWidth 属性类似。

offsetHeight − 返回元素的总高度，包括实际高度、内边距和边框。它是元素的外部高度。
clientHeight − 返回实际高度和内边距之和。它是内部高度。
scrollHeight − 返回可滚动内容的高度，包括内边距。

语法

用户可以按照以下语法使用 offsetHeight、clientHeight 和 scrollHeight JavaScript 属性。

element.scrollHeight;
element.clientHeight;
element.scrollHeight;

示例 3

在下面的示例中，我们向 div 元素添加了内容，并将 overflow-y 设置为 scroll，使其可以垂直滚动。在 JavaScript 中，我们使用 offsetHeight、clientHeight 和 scrollHeight 属性来获取 HTML 元素的不同高度。

输出结果中，offsetHeight 的高度为 130 px，等于 100 px 实际高度 + 10 px 顶部内边距 + 10 px 底部内边距 + 5 px 顶部边框 + 5 px 底部边框。clientHeight 的高度为 120 px，是实际宽度与内边距之和。scrollHeight 的高度为 343 px，等于可滚动内容的高度。

<html>
<head>
   <style>
      .element {
         height: 100px;
         width: 300px;
         padding: 10px;
         border: 5px solid blue;
         font-size: 2rem;
         color: green;
         overflow-x: hidden;
         overflow-y: auto;
      }
   </style>
</head>
<body>
   <h3> Using the <i> offsetHeight, clientHeight, scrollHeight </i> CSS properties to get different Heights of an HTML element. </h3>
   <div class = "element">
      <p class = "text"> Hello Users! The Height of this div element is 300px. The left and right padding is 10px. The left and right border is 5px. </p>
   </div> <br> <br>
   <div id = "output"> </div>
   <script>
      var element = document.querySelector('.element');
      var output = document.querySelector('#output');
      output.innerHTML = "offsetHeight: " + element.offsetHeight + "<br>" +
      "clientHeight: " + element.clientHeight + "<br>" +
      "scrollHeight: " + element.scrollHeight;
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 offsetWidth、clientWidth 和 scrollWidth 属性来获取 HTML 元素的宽度。此外，我们还学习了 offsetHeight、clientHeight 和 scrollHeight 属性在返回 HTML 元素不同高度时的区别。