La propiedad de altura de estilo HTML DOM es similar a la propiedad de altura de CSS , pero se usa para establecer u obtener la altura de un elemento de forma dinámica.
Sintaxis:
- Para establecer la propiedad de altura:
object.style.height = auto|length|%|initial|inherit;
- Para obtener el valor de la propiedad de altura:
object.style.height
Valores de propiedad:
| Valor | Descripción |
|---|---|
| auto | Valor por defecto |
| longitud | Esto define la altura en la unidad de longitud. |
| % | Esto define la altura en porcentaje en comparación con el elemento principal. |
| inicial | establece su valor predeterminado |
| heredar | heredar la propiedad de los padres |
Valor devuelto: String que da la altura del elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style height Property
</title>
<style>
p {
height: auto;
color: white;
font-size: 50px;
background-color: green;
}
</style>
</head>
<body>
<br>
<button onclick="Play()">
Click to change height
</button>
<br />
<br />
<script>
function Play() {
document.getElementById(
"block").style.height = "200px"
}
</script>
<p id="block">
Geeks For Geeks
</p>
</body>
</html>
Producción
- Antes :
Altura de HTML DOM antes
- Después :
HTML DOM Altura después
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style height Property
</title>
<style>
div {
height: 10px;
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<br>
<button onclick="Play()">
Click to increase height of object
</button>
<br />
<br />
<script>
function Play() {
document.getElementById("block"
).style.height = "100px"
}
</script>
<center>
<div id="block">
</div>
</center>
</body>
</html>
Producción :
- Antes :
Ejemplo de altura DOM antes
- Después :
Altura DOM después
Navegadores compatibles: los navegadores compatibles con la propiedad de altura de estilo DOM se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por roshalmoraes y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA