Este blog demuestra el uso del elemento DOM altura del cliente en HTML.
¿Cómo usar el elemento DOM 'clientHeight' en HTML?
El ' altura del cliente La propiedad ” permite a los desarrolladores calcular la altura del contenido visible de un elemento. Ayuda a posicionar elementos entre sí o determinar si un usuario se ha desplazado hasta el borde derecho de un contenedor desplazable. También proporciona información sobre el espacio restante no utilizado en la página web.
Ejemplo
Veamos un ejemplo para una mejor demostración de la propiedad 'clientHeight'. Por ejemplo, el “ al hacer clic ” detector de eventos se utiliza para mostrar el resultado proporcionado por el “ altura del cliente ' propiedad:
< cuerpo >
< h2 identificación = 'elemento' >< / h2 >
< h2 identificación = 'elemento' al hacer clic = 'mostrarAlturaDeElemento()' >
Haga clic en el artículo de Linuxhint para mostrar la altura.
< / h2 >
< guion >
función mostraralturaelemento() {
var ejemplo = document.getElementById('elemento');
var elementHeight= ejemplo.clientHeight;
alert('La Altura es: ' + elementHeight + ' pixels.');
}
< / guion > >
< / cuerpo >
La explicación del fragmento de código anterior se describe a continuación:
- Inicialmente, cree un ' ” etiqueta dentro del “
” y proporcione algunos datos ficticios. Además, asigne una identificación de ' elemento ” al elemento HTML seleccionado. - A continuación, agregue un “ al hacer clic() ” detector de eventos que invoca el “ mostraralturaelemento() ” función cuando el usuario hace clic en el “ ' elemento.
- Luego, dentro del “ mostraralturaelemento() La función ” crea una variable llamada “ ejemplo ” que actúa como una instancia para el elemento HTML que tiene una identificación de “ elemento ”.
- A continuación, cree otra variable llamada ' altura del elemento '' que almacena el resultado proporcionado por la propiedad 'clientHeight'.
- Después de eso, muestre el ' altura del elemento ’’ variable en el cuadro de alerta usando el “ alerta() ' método.
Al final, agregue las siguientes propiedades CSS para diseñar el ' h2 ' elemento:
< estilo >
#elemento {
margen: 20px;
relleno: 10px;
fondo- color : cian oscuro;
altura : 300 píxeles;
texto- alinear : centro;
línea- altura : 100 píxeles;
}
< / estilo >
En el fragmento de código anterior, las siguientes propiedades CSS se asignan al div que tiene una identificación de ' elemento ”:
- El ' 20px ”, “ 10px ' y ' cian oscuro 'los valores se proporcionan al CSS' margen ”, “ relleno ' y ' color de fondo ” propiedades, respectivamente.
- También utiliza “ altura ”, “ texto alineado ' y ' altura de la línea ” Propiedades CSS para mejorar la visibilidad del usuario.
Después de la ejecución del fragmento de código anterior, la página web aparece así:
El resultado muestra que la altura del elemento seleccionado se muestra en el cuadro de alerta, cada vez que el usuario hace clic en el elemento.
Conclusión
Para utilizar el “ altura del cliente ” en HTML, seleccione el elemento HTML accediendo al atributo id. Después de eso, adjunte la propiedad 'clientHeight' y muestre el resultado. Es una propiedad de solo lectura y devuelve el resultado en píxeles. La propiedad “clientHeight” funciona dentro de la etiqueta “