¿Cómo encontrar el ancho de un div usando JavaScript vainilla?

268

¿Cómo encuentra el ancho actual de a <div>de una manera compatible entre navegadores sin usar una biblioteca como jQuery?

javascript html

— Joda Maki
fuente

104

+1 para el comentario "no jQuery" :)

— Zlatko

1

Posible duplicado de Understanding offsetWidth, clientWidth, scrollWidth y -Height, respectivamente (que, de hecho, se ha preguntado mucho más tarde, pero aún tiene una respuesta mucho más elaborada ).

401

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

— Andy E
fuente

8

Eso, o cientWidth, aunque no sé la verdadera diferencia.

— JCOC611

123

offsetWidthincluye ancho de borde, clientWidthno.

— lincolnk

1

Cuando myDiv no tenía una regla CSS pero tenía "ancho" y "altura" definidos en la etiqueta, offsetWidth devolvió el ancho principal. No es un problema, acabo de agregar la regla CSS y funcionó bien.

— robar el

offsetHeight siempre cero en IE11

— nim

44

@nim si su div tiene display: noneo no es parte del documento, siempre tendrá una altura de desplazamiento cero.

— Andy E

38

Se puede utilizar clientWidtho offsetWidth referencia de la red de desarrolladores de Mozilla

Sería como:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

o con ancho de bordes:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

— khrizenriquez
fuente

9

Todas las respuestas son correctas, pero todavía quiero dar algunas otras alternativas que puedan funcionar.

Si está buscando el ancho asignado (sin tener en cuenta el relleno, el margen, etc.) que podría usar.

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyle le permite acceder a todos los estilos de esos elementos. Por ejemplo: padding, paddingLeft, margin, border-top-left-radius, etc.

— Alex Flexlex Waldboth
fuente

4

También puede buscar el DOM usando ClassName. Por ejemplo:

document.getElementsByClassName("myDiv")

Esto devolverá una matriz. Si hay una propiedad en particular que le interesa. Por ejemplo:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth ahora será igual al ancho del primer elemento en su matriz div.

— usuario3386050
fuente

2

En realidad, no tienes que usar document.getElementById("mydiv") .
Simplemente puede usar la identificación del div, como:

var w = mydiv.clientWidth;
o
var w = mydiv.offsetWidth;
etc.

— Ari
fuente

1

Otra opción es usar la función getBoundingClientRect. Tenga en cuenta que getBoundingClientRect devolverá un rect vacío si la pantalla del elemento es 'none'.

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

— usuario4617883
fuente

0

llame al método siguiente en div o body tag onclick = "show (event);" función show (evento) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

— Amrik
fuente

0

La forma correcta de obtener el estilo calculado es esperar hasta que se muestre la página. Se puede hacer de la siguiente manera. Presta atención al tiempo de espera para obtener autovalores.

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

Si usas solo

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

puede obtener autovalores de ancho y alto porque los navegadores no se procesan hasta que se realiza la carga completa.

— Siarhei Kuchuk
fuente