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