La propiedad DOM offsetHeight se usa para devolver la altura de diseño de un elemento como un número entero. Se mide en píxeles. Incluye altura, borde, relleno y barras de desplazamiento horizontales, pero no margen. Si el elemento está oculto, devuelve 0.
Sintaxis:
element.offsetHeight
Valor devuelto: Devuelve la altura del diseño de un elemento como un número entero.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetHeight Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM offsetHeight Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<p id="sudo"></p>
</div>
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
var element = document.getElementById("GFG");
var txt = "Height including padding and border: "
+ element.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetHeight Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM offsetHeight Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<br>
<p id="sudo"></p>
</div>
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
var element = document.getElementById("GFG");
var txt = "";
txt += "Height with padding: "
+ element.clientHeight + "px<br>";
txt += "Height with padding and border: "
+ element.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
</body>
</html>
Producción :
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM offsetHeight se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA