¿Cómo recupero el ancho y alto reales de un elemento HTML?
¿Cómo puedo calcular el ancho y el alto de un <div>elemento para poder centrarlo en la pantalla del navegador (ventana gráfica)? ¿Qué navegadores soportan cada técnica?
Deberías usar las propiedades .offsetWidthy .offsetHeight. Tenga en cuenta que pertenecen al elemento, no .style.
var width = document.getElementById('foo').offsetWidth;
La .getBoundingClientRect()función devuelve las dimensiones y la ubicación del elemento como números de punto flotante después de realizar transformaciones CSS.
> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}
Echa un vistazo a Element.getBoundingClientRect().
Este método devolverá un objeto que contiene width, heighty algunos otros valores útiles:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
Por ejemplo:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
Creo que esto no tiene los problemas que .offsetWidtha .offsetHeightveces regresan 0(como se analiza en los comentarios aquí )
Otra diferencia es getBoundingClientRect()que puede devolver píxeles fraccionarios, donde .offsetWidthy .offsetHeightse redondearán al número entero más cercano.
Nota de IE8 : getBoundingClientRectno devuelve altura ni ancho en IE8 e inferiores.*
Si debe soportar IE8, use .offsetWidthy .offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
Vale la pena señalar que el objeto devuelto por este método no es realmente un objeto normal . Sus propiedades no son enumerables (por lo que, por ejemplo, Object.keysno funciona de forma inmediata).
Más información sobre esto aquí: La mejor manera de convertir un ClientRect/DomRect en un objeto simple
Referencia:
- HTMLElement:
offsetHeightpropiedad - MDN Docs - HTMLElement:
offsetWidthpropiedad - MDN Docs - Elemento:
getBoundingClientRect()método - MDN Docs
NOTA : esta respuesta se escribió en 2008. En ese momento, la mejor solución entre navegadores para la mayoría de las personas era usar jQuery. Dejo la respuesta aquí para la posteridad y, si estás usando jQuery, esta es una buena manera de hacerlo. Si está utilizando algún otro marco o JavaScript puro, la respuesta aceptada probablemente sea el camino a seguir.
A partir de jQuery 1.2.6, puede utilizar una de las funciones principales de CSS , heighty width(o outerHeighty outerWidth, según corresponda).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
Por si a alguien le resulta útil, puse un cuadro de texto, un botón y un div, todo con el mismo css:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
Lo probé en Chrome, Firefox e ie-edge, lo probé con jquery y sin él, y lo probé con y sin box-sizing:border-box. Siempre con<!DOCTYPE html>
Los resultados:
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
