Supongamos que tengo un <div> que deseo centrar en la pantalla del navegador (ventana gráfica). Para hacerlo, necesito calcular el ancho y la altura del elemento <div>.¿Cómo recupero el ancho y alto real de un elemento HTML?
¿Qué debo usar? Por favor incluya información sobre la compatibilidad del navegador.
Se debe utilizar la .offsetWidth y .offsetHeight propiedades. Tenga en cuenta que pertenecen al elemento, no .style.
var width = document.getElementById('foo').offsetWidth;
¡Cuidado! offsetHeight/offsetWidth puede devolver 0 si ha realizado ciertas modificaciones de DOM al elemento recientemente. Es posible que deba llamar a este código en una llamada a setTimeout después de que haya modificado el elemento. –
Documentación sobre '.offsetWidth' y' .offsetHeight': https://developer.mozilla.org/en/Determining_the_dimensions_of_elements –
¿Bajo qué circunstancias devuelve 0? – Cheetah
NOTA: esta respuesta fue escrita en 2008. En ese momento, la mejor solución de navegador cruzado para la mayoría de las personas realmente 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 es probablemente el camino a seguir.
A partir de jQuery 1.2.6 se puede utilizar uno de los núcleos CSS functions, height y width (o outerHeight y outerWidth, según el caso).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth y element.offsetHeight debe hacer, como se sugiere en el post anterior.
Sin embargo, si solo desea centrar el contenido, hay una mejor manera de hacerlo. Suponiendo que usa xhtml strict DOCTYPE. establece el margen: 0, propiedad automática y ancho requerido en px a la etiqueta del cuerpo. El contenido se alinea en el centro con la página.
Creo que también quiere centrarlo verticalmente, lo cual es un problema con CSS a menos que pueda cumplir algunos criterios específicos (por ejemplo, contenido de tamaño conocido) – Greg
Solo necesita calcularlo para IE7 y versiones anteriores (y solo si su contenido no tiene un tamaño fijo). Sugiero usar comentarios condicionales de HTML para limitar el pirateo a IE antiguos que no son compatibles con CSS2. Para todos los demás navegadores, use esto:
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
Esta es la solución perfecta. Se centra en <div> de cualquier tamaño y lo ajusta al tamaño de su contenido.
También se puede utilizar este código:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
Hmm, funciona en Chrome e IE9, no parece funcionar en Firefox. ¿Funciona solo para ciertos tipos de documentos? – BrainSlugs83
... parece CSS ayuda a poner en el centro div ...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
Si offsetWidth devuelve 0, se puede obtener la anchura del elemento de estilo propiedad y busca un número. "100px" -> 100
/\d*/.exec(MyElement.style.width)
Tome un vistazo a Element.getBoundingClientRect().
Este método devolverá un objeto que contiene el width, height, y 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 .offsetWidth y .offsetHeight hacer donde a veces devuelven 0 (como se discutió en el comments here)
Otra diferencia es getBoundingClientRect() puede devolver píxeles fraccionarios, donde .offsetWidth y .offsetHeight redondearán al número entero más cercano.
IE8 Nota:. getBoundingClientRect no devuelve la altura y la anchura de IE8 y por debajo *
Si necesidad apoyo IE8, utiliza .offsetWidth y .offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
Referencia:
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight.offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth.getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRectgetboundingClientRect() devolverá el ancho real y la altura de los elementos escalados a través de css, mientras que 'offsetHeight' y' offsetWidth' no lo harán. – LukeP
Sólo en caso de que sea útil para cualquier persona, pongo un cuadro de texto botón y DIV todos 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 y ie-edge, probé con jquery y sin, 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
Para que quede claro ... ¿alguno de esos navegadores hace algo diferente uno del otro? No puedo encontrar ninguna diferencia ... Además, no estoy bajando la votación (todavía), pero esto no * realmente * responde directamente la pregunta, aunque podría ser fácilmente editada para hacerlo. –
No estaba destinado a responder la pregunta, ya ha sido respondida. Solo algunos datos útiles y sí, todos los principales navegadores de la última versión están de acuerdo con estos valores, lo cual es algo bueno. – Graham
Bueno ... si su intención es * no * responder la pregunta, entonces esto realmente no pertenece aquí (como una "respuesta"). Consideraría poner esto en algún recurso externo (tal vez una esencia de GitHub, o una publicación de blog) y vincularlo en un comentario sobre la Pregunta original o una de las respuestas. –
Según MDN: Determining the dimensions of elements
offsetWidth y offsetHeight devolver la "cantidad total de espacio de un elemento ocupa, incluyendo la anchura del contenido visible, barras de desplazamiento (si los hay), relleno y borde "
clientWidth y clientHeight return" cuánto espacio ocupa el contenido visualizado actual, inc. Luding acolchado, pero sin incluir las fronteras, márgenes, o barras de desplazamiento"
scrollWidth y scrollHeight devolver el 'tamaño real del contenido, independientemente de la cantidad de la misma es visible en ese momento, es necesario utilizar el'
Así depende de si se espera que el contenido medido esté fuera del área visible actual.
Tenga en cuenta que obtener la altura de un elemento mediante ** cualquier método ** siempre tiene un ** impacto en el rendimiento **, ya que hace que el navegador vuelva a calcular la posición de todos los elementos en la página (reflujo). Por lo tanto, evite hacerlo demasiado. Pagar [esta lista] (https://gist.github.com/paulirish/5d52fb081b3570c81e3a) para ver qué tipo de cosas desencadenan un reflujo. –