Pregunta ¿Cómo recupero el ancho y alto real de un elemento HTML?


Supongamos que tengo un <div> que deseo centrarme en la pantalla del navegador (ventana gráfica). Para hacerlo, necesito calcular el ancho y la altura del <div> elemento.

¿Qué debería usar? Por favor incluya información sobre la compatibilidad del navegador.


631
2017-11-16 19:15


origen


Respuestas:


Deberías usar el .offsetWidth y .offsetHeight propiedades. Tenga en cuenta que pertenecen al elemento, no .style.

var width = document.getElementById('foo').offsetWidth;


959
2017-11-16 19:35



Echa un vistazo a Element.getBoundingClientRect().

Este método devolverá un objeto que contiene el 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 .offsetWidth y .offsetHeight hacer donde a veces regresan 0 (como se discutió en comentarios aquí)

Otra diferencia es getBoundingClientRect() puede devolver píxeles fraccionarios, donde .offsetWidth y .offsetHeight redondeará al número entero más cercano.

IE8 Note: getBoundingClientRect no devuelve altura y ancho en IE8 y por debajo.*

Si tu debe soporte IE8, uso .offsetWidth y .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 normal objeto. Sus propiedades no son enumerable (así por ejemplo, Object.keys no funciona de fábrica).

Más información sobre esto aquí: La mejor forma de convertir un ClientRect / DomRect en un objeto simple

Referencia:


116
2017-09-18 18:37



NOTA: esta respuesta se escribió en 2008. En ese momento, la mejor solución de navegador cruzado 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 es probablemente el camino a seguir.

A partir de jQuery 1.2.6 puede usar uno de los núcleos Funciones de CSS, height y width (o outerHeight y outerWidth, según sea apropiado).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();

55
2017-11-16 19:29



En caso de que sea útil para cualquier persona, pongo un cuadro de texto, un botón y 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 intenté en Chrome, Firefox y ie-edge, lo intenté con jquery y sin él, y lo intenté 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

28
2018-02-19 12:52



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 <div> de cualquier tamaño, y lo ajusta al tamaño de su contenido.


4
2017-11-16 20:57



element.offsetWidth y element.offsetHeight debería hacer, como se sugiere en la publicación anterior.

Sin embargo, si solo quieres 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.


1
2017-11-16 19:50



... parece que CSS ayuda a poner div en el centro ...

<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>

1
2018-03-01 00:21



De acuerdo a MDN: determinar las dimensiones de los elementos

offsetWidth y offsetHeight devuelve la "cantidad total de espacio que ocupa un elemento, incluido el ancho del contenido visible, las barras de desplazamiento (si corresponde), el relleno y el borde"

clientWidth y clientHeight devuelve "cuánto espacio ocupa el contenido visualizado real, incluido el relleno, pero sin incluir el borde, los márgenes o las barras de desplazamiento"

scrollWidth y scrollHeight devolver el "tamaño real del contenido, independientemente de la cantidad de contenido visible actualmente"

Por lo tanto, depende de si se espera que el contenido medido esté fuera del área visible actual.


1
2018-03-01 20:38



también puedes usar este código:

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;

0
2018-03-25 11:24



Es fácil modificar los estilos de elementos pero es un poco complicado leer el valor.

JavaScript no puede leer ninguna propiedad de estilo de elemento (elem.style) procedente de css (interno / externo) a menos que utilice el método incorporado invoque getComputedStyle en javascript.

getComputedStyle (elemento [, pseudo])

Elemento: El elemento para leer el valor para.
seudo: Un pseudo-elemento si es necesario, por ejemplo :: before. Una cadena vacía o ningún argumento significa el elemento en sí.

El resultado es un objeto con propiedades de estilo, como elem.style, pero ahora con respecto a todas las clases de css.

Por ejemplo, aquí el estilo no ve el margen:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

Así que modificó su código javaScript para incluir el estilo getComputedStyle del elemento que desea obtener su ancho / alto u otro atributo

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;
        console.log(element);
        console.log(width);
    }

}

Valores calculados y resueltos

Hay dos conceptos en CSS:

Un valor de estilo calculado es el valor después de todas las reglas CSS y CSS   la herencia se aplica, como resultado de la cascada de CSS. Puede mirar   como altura: 1em o tamaño de fuente: 125%.

Un valor de estilo resuelto es el que finalmente se aplica al elemento.   Los valores como 1em o 125% son relativos. El navegador toma el calculado   valor y hace que todas las unidades sean fijas y absolutas, por ejemplo:   altura: 20px o tamaño de letra: 16px. Para propiedades de geometría, valores resueltos   puede tener un punto flotante, como ancho: 50.5px.

Hace mucho tiempo, getComputedStyle se creó para obtener valores calculados, pero resultó que los valores resueltos son mucho más convenientes y el estándar cambió.
Así que hoy en día getComputedStyle realmente devuelve el valor resuelto de la propiedad.

Tenga en cuenta:

getComputedStyle requiere el nombre completo de la propiedad

Siempre debe pedir la propiedad exacta que desea, como   paddingLeft o alto o ancho. De lo contrario, la correcta   el resultado no está garantizado

Por ejemplo, si hay propiedades paddingLeft / paddingTop, entonces   ¿Qué deberíamos obtener para getComputedStyle (elem) .padding? Nada, o   tal vez un valor "generado" de los rellenos conocidos? No hay un estándar   gobernar aquí.

Hay otras inconsistencias. Como ejemplo, algunos navegadores (Chrome) muestran 10px en el documento a continuación, y algunos de ellos (Firefox): no:

<style>
  body {
    margin: 30px;
    height: 900px;
  }
</style>
<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

para más información https://javascript.info/styles-and-classes


0
2018-04-27 11:58