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中文網其他相關文章！