CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height-css教程-PHP中文网

CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height

读完本教程的标题后想到的第一个问题是offsetWidth、clientWidth和scrollWidth返回HTML的宽度，但是它们之间有什么区别？

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

偏移宽度、客户端宽度、滚动宽度

offsetWidth - 它是元素的总宽度，包括实际宽度、填充、边框和滚动条（以像素为单位）。它不包括宽度中的边距。它是 HTML 元素的外部宽度。
clientWidth - 它返回元素的实际宽度+填充。它不包括边距、边框或滚动条宽度。它是 HTML 元素的内部宽度。
scrollWidth - 它返回可滚动内容的总宽度，包括填充，但不包括边框、边距、滚动条等。

语法

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

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

登录后复制

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

示例 1

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

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

<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 设置为滚动，使其可以垂直滚动。在JavaScript中，我们使用offsetHeight、clientHeight和scrollHeight属性来获取HTML元素的不同高度。

在输出中，offsetHeight高度为130 px，等于100 px实际高度+ 10 px顶部内边距+ 10 px底部内边距+ 5 px顶部边框+ 5 px底部边框。 clientheight 为 120 px，它是实际宽度和填充的总和。滚动高度为 343 像素，等于可滚动内容的高度。

<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 元素的宽度。此外，我们还了解了返回 HTML 元素不同高度的 offsetHeight、clientHeight 和 scrollHeight 属性之间的区别。

以上是CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height的详细内容。更多信息请关注PHP中文网其他相关文章！