如何获得<div>使用 JavaScript 的高度？

如何使用 JavaScript 获取

高度？

方法一：使用 offsetHeight 属性：元素的 offsetHeight 属性是只读属性，用于返回元素的高度（以像素为单位）。它包括元素的任何边框或填充。此属性可用于查找

元素的高度。

句法：

divElement.offsetHeight

例子：

  

    
        How to get the div height
        using JavaScript ?
    
  
    
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            display:inline-block;
        }
    

  

    
        GeeksforGeeks
    
      
    
        Get the height of 
        element using JavaScript
    
      
    
        Click on the button to get the height 
        of  element
    
      
    
      
    
        Height of the div: 
        
    
      
    
        Get Height
    
      
    
        function getHeight() {
              
            divElement = document.querySelector(".box");
      
            elemHeight = divElement.offsetHeight;
      
            document.querySelector(".output").textContent
                    = elemHeight + "px";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法2：使用clientHeight 属性：元素的clientHeight 属性是只读属性，用于返回元素的高度（以像素为单位）。它仅包括应用于元素的填充，不包括边框、边距或水平滚动条。此属性可用于查找 div 元素的高度。

句法：

divElement.clientHeight

例子：

  

    
        How to get the div height
        using JavaScript ?
    
  
    
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            display:inline-block;
        }
    

  

    
        GeeksforGeeks
    
      
    
        Get the height of 
        element using JavaScript
    
      
    
        Click on the button to get the height 
        of  element
    
      
    
      
    
        Height of the div: 
        
    
      
    
        Get Height
    
      
    
        function getHeight() {
              
            divElement = document.querySelector(".box");
   
            elemHeight = divElement.clientHeight;
   
            document.querySelector(".output").textContent
                    = elemHeight + "px";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法 3：使用 getBoundingClientRect() 方法： getBoundingClientRect() 方法用于返回一个 DOMRect 对象，该对象包含与边界矩形的尺寸相关的 8 个属性。
DOMRect 对象的这些属性之一是 height 属性。它返回 DOMRect 对象的高度。此属性可用于查找 div 元素的高度。

句法：

elemRect = divElement.getBoundingClientRect();
elemHeight = elemRect.height;

例子：

  

    
        How to get the div height
        using JavaScript ?
    
  
    
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            display:inline-block;
        }
    

  

    
        GeeksforGeeks
    
      
    
        Get the height of 
        element using JavaScript
    
      
    
        Click on the button to get the height 
        of  element
    
      
    
      
    
        Height of the div: 
        
    
      
    
        Get Height
    
      
    
        function getHeight() {
              
            divElement = document.querySelector(".box");
   
            elemRect = divElement.getBoundingClientRect();
        
            elemHeight = elemRect.height;
   
            document.querySelector(".output").textContent
                    = elemHeight + "px";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：