CSS OffsetWidth, ClientWidth, ScrollWidth分别是什么

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

它们之间的区别在于它们在网页上占据了多少空间。在本教程中，我们将学习HTML元素的不同宽度和不同高度。

OffsetWidth，ClientWidth，ScrollWidth

offsetWidth - 它是元素的总宽度，包括实际宽度、内边距、边框和滚动条，以像素为单位。它的宽度不包括在内的是外边距。这是一个HTML元素的外部宽度。
clientWidth - 返回元素的实际宽度加上内边距。它不包括外边距、边框或滚动条的宽度。这是一个HTML元素的内部宽度。
scrollWidth - 返回可滚动内容的总宽度，包括内边距，但不包括边框、外边距、滚动条等。

语法

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

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

在上述的语法中，元素是一个需要找到宽度的HTML元素。

示例1

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

在JavaScript中，我们访问了div元素并使用了offsetWidth、clientWidth和scrollWidth属性来获取它们各自的宽度。从输出中，用户可以观察到offsetWidth等于330像素（实际宽度300像素 + 左边框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属性类似于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元素的不同高度。