如何使用 AngularJS 动态获取 div 的内容高度？

可以根据用户要求使用 clientHeight 和 scrollHeight 属性动态获取 div 的内容高度。如果用户想知道实际显示内容所需的空间，包括padding占用的空间，但不包括滚动条、边距或边框，那么用户可以使用以下任何一个过程，将返回整个内容的高度一个元素。

• 使用 Element.clientHeight 属性
• 使用 Element.scrollHeight 属性

示例 1：使用 clientHeight 属性的 div 的内容高度将返回元素的整个内容的高度。

HTML

  

    
    
  
    
        #div1 {
            height: 100px;
            width: 300px;
            border: 2px solid black;
            overflow: scroll;
        }
  
        h1 {
            color: green;
        }
    

  

    
        GeeksforGeeks
        Geeting Content height
  
        
            Calculate content height of a div 
            on GeeksforGeek. GeeksforGeeks is
            a computer science portal which
            helps students to learn various 
            programming language and master
            data structures and algorithms. 
            There are various courses available
            to learn new skills.
        
        
        
            Content height of Div
        
  
        
    
  
    
        function contentheight() {
            var ans = "Content-height: "
                + angular.element(document
                    .getElementById("div1").clientHeight)
                + "px<br>";
            document.getElementById("p1").innerHTML = ans;
        } 
    

  

输出：

• 点击按钮前：

  

• 点击按钮后：

  

示例 2：使用 scrollHeight 属性的 div 的内容高度将返回元素的整个内容的高度。

HTML

  

    
    
  
    
        #div1 {
            height: 100px;
            width: 300px;
            border: 2px solid black;
            overflow: scroll;
        }
  
        h1 {
            color: green;
        }
    

  

    
        GeeksforGeeks
        Geeting Content height
  
        
            Calculate content height of a div
            on GeeksforGeek. GeeksforGeeks is
            a computer science portal which
            helps students to learn various 
            programming language and master 
            data structures and algorithms. 
            There are various courses available 
            to learn new skills.
        
        
  
        
            Content height of Div
        
  
        
    
  
    
        function contentheight() {
            var ans = "Content-height: "
                + angular.element(document
                .getElementById("div1").scrollHeight)
                + "px<br>";
            document.getElementById("p1").innerHTML = ans;
        } 
    

  

输出：

• 点击按钮前：

  

• 点击按钮后：