如何使用 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
        Getting 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
        Getting 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;
        }
    

 

输出：

点击按钮前：

点击按钮后：