Para obtener la altura de un elemento, hay cinco métodos comunes en JavaScript. Veamos las diferencias entre cada uno y cuándo deben usarse. Solo el último método proporciona la altura renderizada correcta en lugar de la altura del diseño.
- estilo.altura
- jQuery( altura, altura interior, altura exterior )
- clientHeight, offsetHeight, scrollHeight
- getComputedStyle
- getBoundingClientRect().height
La altura renderizada es la altura que el elemento obtiene finalmente después de aplicar todos los estilos y transformaciones en ese elemento. Por ejemplo, un elemento tiene una altura de 100px y luego obtiene un transform:scale(0.5) . Su altura renderizada es de 50 px (después de la transformación) y la altura del diseño es de 100 px.
style.height Podemos usar style.height en cualquier elemento seleccionado y devolverá su altura. No incluye el relleno , borde o margen . Siempre devuelve la altura junto con la unidad específica.
Nota: solo funciona si configuramos explícitamente la altura como en línea usando el atributo de estilo en HTML.
Sintaxis:
let height = document.getElementById("someId").style.height;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<h1>
style.height without
inline style
</h1>
</div>
<div id="div2" style="height: 100px;">
<h1>style.height with inline style</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").style.height);
alert(document.getElementById
("div2").style.height);
}
</script>
</body>
</html>
Salida:
devuelve una string vacía para «div1» y devuelve «100px» para «div2»
- Para «div1»:
- Para «div2»:
Conclusión: devuelve cualquier altura especificada solo en el atributo de estilo en línea . No tiene en cuenta ninguna transformación, como la escala. No es confiable y no debe usarse ya que los estilos en línea no son ideales.
jQuery(altura, alturaInterior, AlturaExterior)
altura() Devuelve la altura actual del elemento. No incluye el relleno , borde o margen . Siempre devuelve un valor de píxel sin unidades.
Nota: height () siempre devolverá la altura del contenido, independientemente del valor de la propiedad de tamaño de cuadro CSS .
Sintaxis:
let height = $("#div1").height();
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<div id="div1">
<h1>$(".class").height</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert($("#div1").height());
}
</script>
</body>
</html>
Salida:
devuelve un valor de píxel sin unidades como 100.
Producción:
innerHeight() Devuelve la altura actual del elemento, incluido el relleno superior e inferior , pero no el borde. Siempre devuelve un valor de píxel sin unidades.
Sintaxis:
let height = $("#div1").innerHeight();
Ejemplo 3:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
margin: 5px;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<div id="div1">
<h1>$(".class").innerHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert($("#div1").innerHeight());
}
</script>
</body>
</html>
Salida:
devuelve 120 que es (10 (relleno superior) + 100 (altura del contenido) + 10 (relleno inferior))
outerHeight() Devuelve la altura actual del elemento, incluido el relleno , el borde y el margen opcionalmente. Siempre devuelve un valor de píxel sin unidades.
Sintaxis:
let height = $("#div1").outerHeight();
let height = $("#div1").outerHeight();
Ejemplo 4:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
margin: 5px;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<div id="div1">
<h1>$(".class").outerHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert($("#div1").outerHeight());
}
</script>
</body>
</html>
Producción:
(1(borde superior)+ 10(relleno superior)+ 100(altura del contenido)+1 0(relleno inferior)+ 1(borde inferior)
Nota: No se garantiza que el valor informado por height() , innerHeight() y outsideHeight() sea preciso cuando el elemento o su elemento principal están ocultos. Para obtener resultados precisos, asegúrese de que el elemento esté visible antes de usar estos métodos. jQuery intentará mostrar temporalmente y luego volver a ocultar un elemento para medir sus dimensiones, pero esto no es confiable y (incluso cuando es preciso) puede afectar significativamente el rendimiento de la página. Esta característica de medición de mostrar y ocultar puede eliminarse en una versión futura de jQuery.
Conclusión:
// If you need height of div excluding margin/padding/border
$('#div1').height();
// If you need height of div with padding but without border + margin
$('#div1').innerHeight();
// If you need height of div including padding and border
$('#div1').outerHeight();
// For including border + margin + padding, can use
$('#div1').outerHeight(true);
Todos estos devuelven solo la altura del diseño, no la altura representada .
clientHeight, offsetHeight, scrollHeight
clientHeight() Devuelve la altura del contenido mostrado del elemento (incluido el relleno vertical pero no el borde, el margen o la barra de desplazamiento). Siempre devuelve un valor entero en píxeles. Si el elemento está oculto, se devuelve 0. Si es un elemento desplazable, solo dará la altura de la parte visible.
Sintaxis:
let height = document.getElementById("div1").clientHeight;
Ejemplo 5:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<div id="div1">
<h1>.clientHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").clientHeight);
}
</script>
</body>
</html>
Producción:
Devuelve 120 que es (10 (relleno superior) + 100 (altura del contenido) + 10 (relleno inferior))
Conclusión: si queremos encontrar la altura del contenido real que se muestra, use clientHeight. Devuelve la altura del diseño de la parte actualmente visible del elemento que se redondea a un valor entero incluso si el resultado es una fracción.
offsetHeight() Devuelve la altura que ocupa el elemento, incluido el relleno vertical, el borde y las barras de desplazamiento (si las hay). No incluye el margen. Siempre devuelve un valor entero en píxeles. Si el elemento está oculto, se devuelve 0.
Nota: No incluye la altura de pseudo elementos como ::after o ::before
Sintaxis:
let height = document.getElementById("div1").offsetHeight;
Ejemplo 6:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<h1>.offsetHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").offsetHeight);
}
</script>
</body>
</html>
Producción:
Devuelve 122 que es (1(border-top) + 10(padding-top)+ 100(contentHeight) + 10(padding-bottom) + 1(border-bottom))
Conclusión: si necesita saber la altura total que ocupa un elemento, incluido el ancho del contenido visible, las barras de desplazamiento (si las hay), el relleno y el borde, podemos usar offsetWidth . Devuelve la altura del diseño de la parte actualmente visible del elemento que se redondea a un valor entero.
scrollHeight() Devuelve la altura de todo el contenido de un elemento, incluso si solo una parte es visible debido a las barras de desplazamiento. Siempre devuelve un valor entero en píxeles. Si el elemento está oculto, se devuelve 0.
Es similar a clientHeight ya que incluye el elemento y su relleno , pero no su borde, margen o barra de desplazamiento horizontal (si está presente). También puede incluir la altura de pseudoelementos como ::before o ::after . Si el contenido del elemento puede caber sin necesidad de una barra de desplazamiento vertical, su scrollHeight es igual a clientHeight.
Sintaxis:
let height = document.getElementById("div1").scrollHeight
Ejemplo 7:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
.div0 {
height: 50px;
}
#div1 {
height: 100px;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div id="div1">
<h1>.offsetHeight</h1>
As the placement season is back
so are we to help you ace the
interview.We have selected some
most commonly asked and must do
practice problems for you. You
can also take part in our mock
placement contests which will
help you learn different topics
and practice at the same time,
simulating the feeling of a
real placement test environment.
There are many important things
that should be taken care of,
like user friendliness,modularity,
security, maintainability, etc.
Why to worry about performance?
The answer to this is simple, we
can have all the above things
only if we have performance. So
performance is like currency through
which we can buy all the above things.
Another reason for studying performance
is – speed is fun! To summarize,
performance == scale. Imagine a text
editor that can load 1000 pages,
but can spell check 1 page per minute
OR an image editor that takes 1 hour
to rotate your image 90 degrees left
OR … you get it. If a software feature
can not cope with the scale of tasks
users need to perform – it is as good
as dead.
</div>
<button onclick="alertHeight()">
Get Height</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").scrollHeight);
}
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<h1>.getComputedStyle(el).height</h1>
</div>
<button onclick="alertHeight()">
Get Height</button>
<script>
function alertHeight() {
alert(getComputedStyle(
document.getElementById("div1"))
.getPropertyValue("height"));
}
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<h1>.getBoundingClientRect().height</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById("div1").
getBoundingClientRect().height);
}
</script>
</body>
</html>