¿Cómo obtener dinámicamente la altura del contenido de un div usando AngularJS?

La altura del contenido de un div puede obtenerse dinámicamente usando las propiedades clientHeight y scrollHeight según los requisitos del usuario. Si un usuario desea conocer el espacio requerido por el contenido real que se muestra, incluido el espacio ocupado por el relleno pero sin incluir las barras de desplazamiento, los márgenes o los bordes, entonces el usuario puede usar cualquiera de los siguientes procedimientos que devolverán la altura de todo el contenido de un elemento.

  • Usando la propiedad Element.clientHeight
  • Usando la propiedad Element.scrollHeight

Ejemplo 1: Altura del contenido de div usando la propiedad clientHeight devolverá la altura de todo el contenido de un elemento.

HTML

<!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>

Producción:

Antes de hacer clic en el botón:

  •  

Después de hacer clic en el botón:

  •  

Ejemplo 2: la altura del contenido de div usando la propiedad scrollHeight devolverá la altura de todo el contenido de un elemento.

HTML

<!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>

Producción:

Antes de hacer clic en el botón:

  •  

Después de hacer clic en el botón:

  •  

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *