Come trovare la larghezza di un div usando JavaScript vanilla?

Come si trova l'attuale larghezza di a <div>in modo compatibile con più browser senza utilizzare una libreria come jQuery?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

È possibile utilizzare clientWidtho offsetWidth di riferimento rete di sviluppatori di Mozilla

Sarebbe come:

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

o con larghezza dei bordi:

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

Tutte le risposte sono giuste, ma voglio ancora dare alcune altre alternative che potrebbero funzionare.

Se stai cercando la larghezza assegnata (ignorando il riempimento, il margine e così via) potresti usare.

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

getComputedStyle ti consente di accedere a tutti gli stili di quegli elementi. Ad esempio: padding, paddingLeft, margin, border-top-left-radius e così via.

Puoi anche cercare nel DOM usando ClassName. Per esempio:

document.getElementsByClassName("myDiv")

Questo restituirà un array. Se c'è una proprietà particolare che ti interessa. Ad esempio:

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

divWidth sarà ora uguale alla larghezza del primo elemento nell'array div.

In realtà, non devi usare document.getElementById("mydiv") .
Puoi semplicemente usare l'id del div, come:

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

Un'altra opzione è quella di utilizzare la funzione getBoundingClientRect. Nota che getBoundingClientRect restituirà un rettangolo vuoto se la visualizzazione dell'elemento è 'none'.

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

chiama il metodo seguente su div o body tag onclick = "show (evento);" funzione 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();
        }


    }

Il modo corretto di ottenere lo stile calcolato è in attesa fino al rendering della pagina. Può essere fatto nel modo seguente. Prestare attenzione al timeout per ottenere autovalori.

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

Se usi solo

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

puoi ottenere autovalori per larghezza e altezza perché i browser non eseguono il rendering fino a quando non viene eseguito il caricamento completo.