如何使用原生JavaScript查找div的宽度

为了测量div元素的宽度，我们将利用JavaScript的offsetWidth属性。JavaScript的这个属性返回一个整数，表示元素的布局宽度，以像素为单位。

语法：

element.offsetWidth

返回值:
* 返回对应元素的布局像素宽度。

示例:

如何使用原生JavaScript查找div的宽度

以下程序将使用 offsetWidth 来说明解决方案:

程序1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        GeeksforGeeks 
    </title> 
  
    <style> 
        #GFG { 
            height: 30px; 
            width: 300px; 
            padding: 10px; 
            margin: 15px; 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="GFG"> 
        <b>Division</b> 
    </div> 
  
    <button type="button"
            onclick="Geeks()"> 
        Check 
    </button> 
  
    <script> 
        function Geeks() { 
  
            var elemWidth =  
                document.getElementById("GFG").offsetWidth; 
            alert(elemWidth); 
        } 
    </script> 
</body> 
  
</html>

输出：

另一种测量 div 元素宽度的方法是利用 JavaScript 的 clientWidth() 属性。

下面的程序将使用 clientWidth 展示解决方案：

程序2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        GeeksforGeeks 
    </title> 
  
    <style> 
        #GFG { 
            height: 30px; 
            width: 300px; 
            padding: 10px; 
            margin: 15px; 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="GFG"> 
        <b>Division</b> 
    </div> 
  
    <button type="button" onclick="Geeks()"> 
        Check 
    </button> 
  
    <script> 
        function Geeks() { 
  
            var elemWidth =  
                document.getElementById("GFG").clientWidth; 
            alert(elemWidth); 
        } 
    </script> 
</body> 
  
</html>

输出：

注意： clientWidth 返回内部宽度，包括填充但不包括边框和滚动条；而 offsetWidth 返回外部宽度，包括填充和边框。