如何使用AngularJS动态地获得一个div的内容高度

在这篇文章中，我们将看到如何获得一个 div的内容高度。使用Javascript进行动态操作，并将通过插图了解其实现。

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

Element.clientHeight属性：用于返回一个元素的可查看高度，以像素为单位。
Element.scrollHeight属性：这是用来返回一个元素的高度。

例子1：在这个例子中，使用clientHeight属性的div的内容高度将返回一个元素的整个内容的高度。

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
 
    <style>
        #div1 {
            height: 100px;
            width: 300px;
            border: 2px solid black;
            overflow: scroll;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Getting Content height</h3>
        <div id="div1">
            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.
        </div>
        <br>
        <button onclick="contentheight()">
            Content height of Div
        </button>
        <p id="p1"></p>
 
    </center>
    <script>
        function contentheight() {
            var ans = "Content-height: "
                + angular.element(document
                .getElementById("div1").clientHeight)
                + "px<br>";
                 
            document.getElementById("p1").innerHTML = ans;
        }
    </script>
</body>
 
</html>

输出:

如何使用AngularJS动态地获得一个div的内容高度？

获取内容的高度在一个 <div>使用clientHeight属性

例子2：在这个例子中，使用scrollHeight属性的div的内容高度将返回一个元素的整个内容的高度。

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>
        #div1 {
            height: 100px;
            width: 300px;
            border: 2px solid black;
            overflow: scroll;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>Getting Content height</h3>
        <div id="div1">
            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.
        </div>
        <br>
        <button onclick="contentheight()">
            Content height of Div
        </button>
        <p id="p1"></p>
 
    </center>
    <script>
        function contentheight() {
            var ans = "Content-height: "
            + angular.element(document
            .getElementById("div1").scrollHeight)
            + "px<br>";
            document.getElementById("p1").innerHTML = ans;
        }
    </script>
</body>
</html>

输出:

如何使用AngularJS动态地获得一个div的内容高度？