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

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

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

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

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.

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.

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.

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);  
}

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();
        }


    }

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.