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

打印页面