HTML - DOM 元素 offsetWidth 屬性

元素的 offsetWidth 屬性會返回該元素在網頁上可見的總寬度，包括內容寬度、水平填充和邊框，以畫素為單位。

語法

element.offsetWidth

返回值

offsetWidth 屬性返回一個整數，表示元素的總畫素寬度，包括其填充、邊框和可選的捲軸寬度。

HTML DOM 元素 'offsetWidth' 屬性示例

以下是一些示例，展示了 'offsetWidth' 屬性的使用，以便更好地理解。

點選按鈕時的偏移寬度

此示例演示瞭如何使用 offsetWidth 屬性獲取元素的寬度。以下程式碼包含一個具有類 element 的<div> 元素和一個按鈕。點選按鈕時，它會顯示計算出的元素寬度。

<!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    #exampleElement {
      width: 200px;
      padding: 10px;
      border: 1px solid black;
      background-color: lightblue;
    }
  </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetHeight Property</h2>
    <div id="exampleElement">Example Element</div>
    
    <button onclick="showWidth()">
      Show Width
    </button>
    
    <script>
      function showWidth() {
        const element = document.getElementById('exampleElement');
        const width = element.offsetWidth;
        alert(`Width of the element: ${width}px`);
      }
    </script>
</body>

</html>

帶有填充和邊框的偏移寬度

此示例演示瞭如何使用 offsetWidth 屬性獲取網頁上元素的總計算寬度，包括其填充和邊框。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
      #ex{
        width: 200px;
        padding: 20px;
        border: 5px solid black; 
        background-color: lightblue;
        text-align: center;
      }
      #wi { 
        color: green;
      }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetWidth Property</h2>
    <div id="ex">Example Element</div>
      <br>
      <button onclick="showWidth()">
          Show Width including Padding and Border
      </button>
    <div id="wi"></div>
    
    <script>
      const exampleElement=document.getElementById('ex');
      const widthDisplay = document.getElementById('wi');
    
      function showWidth() {
        const widthWithPaddingBorder = 
        exampleElement.offsetWidth;
        widthDisplay.textContent = 
        `Width including padding and border: 
        ${widthWithPaddingBorder}px`;
      }
    </script>
</body>

</html>

動態計算捲軸寬度

此示例演示瞭如何使用 offsetWidth 屬性動態計算網頁上捲軸元素的寬度，包括其填充和邊框。

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
  #scroll {
    width: 200px;
    height: 200px;
    overflow: scroll;
    border: 1px solid black;
    padding: 20px;
  }
  #cont {
    width: 100%;
    height: 400px;  
  }
</style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetHeight Property</h2>
    <div id="scroll">
      <div id="cont">Scrollable Content</div>
    </div>
    
    <button onclick="calculate()">
        Calculate Scrollbar Width
    </button>
    <div id="scrollbar"></div>
    
    <script>
      function calculate () {
        const scCon = document.getElementById('scroll');
        const co = document.getElementById('content');
    
        const scwid = scCon.offsetWidth-cont.clientWidth;
        
        const scD= document.getElementById('scrollbar');
        scD.textContent = `Scrollbar width: ${scwid}px`;
      }
    </script>
</body>

</html>

支援的瀏覽器

屬性
offsetWidth	是	是	是	是	是

html_dom_element_reference.htm

列印頁面