La propiedad DOM clientHeight se utiliza para devolver la altura visible de un elemento en términos de píxeles. Incluye la medida del ancho del relleno, pero no incluye la propiedad de margen, borde y barra de desplazamiento para la medida del ancho del elemento. Esta propiedad solo devuelve la altura real de un elemento visible para el usuario. Es una propiedad de solo lectura.
Sintaxis:
element.clientHeight
Valor devuelto: Devuelve un valor numérico que representa la altura visible del elemento.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM clientHeight Property
</title>
<style>
h1 {
color: green;
font-size: 35px;
}
#GFG {
height: 100px;
width: 350px;
padding: 40px;
margin: 25px;
border: 5px solid coral;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM clientHeight Property </h2>
<div id="GFG">
<p style="color:white;font-size:25px;">
GeeksforGeeks
</p>
<p id="sudo" style="color:white;"></p>
</div>
<button onclick="Geeks()">Submit</button>
<script>
function Geeks() {
var w = document.getElementById("GFG");
// Using clientHeight property
var x = "viewable Height is: "
+ w.clientHeight + "px<br>";
x += "viewable width is:: "
+ w.clientWidth + "px";
document.getElementById("sudo").innerHTML = x;
}
</script>
</center>
</body>
</html>
Producción:
- Inicialmente:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM clientHeight se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA