如何使用 vanilla JavaScript 查找 div 的宽度？

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

句法：

element.offsetWidth

返回值：
• 返回相应元素的布局像素宽度。

例子：

以下程序将说明使用offsetWidth 的解决方案：
方案一：

  

    
        GeeksforGeeks
    
  
    
        #GFG {
            height: 30px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
    

  

  
    
        Division
    
  
    
        Check
    
  
    
        function Geeks() {
  
            var elemWidth = 
                document.getElementById("GFG").offsetWidth;
            alert(elemWidth);
        }
    

  

输出：

320

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

以下程序将说明使用clientWidth 的解决方案：
方案二：

  

    
        GeeksforGeeks
    
  
    
        #GFG {
            height: 30px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
    

  

  
    
        Division
    
  
    
        Check
    
  
    
        function Geeks() {
  
            var elemWidth = 
                document.getElementById("GFG").clientWidth;
            alert(elemWidth);
        }
    

  

输出：

320

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