Wie finde ich die Breite eines Div mit Vanilla JavaScript?

Wie finden Sie die aktuelle Breite eines <div>Browsers kompatibel, ohne eine Bibliothek wie jQuery zu verwenden?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

Sie können verwenden clientWidthoder offsetWidth Referenz Mozilla Developer Network

Es wäre wie:

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

oder mit Rahmenbreite:

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

Alle Antworten sind richtig, aber ich möchte noch einige andere Alternativen geben, die funktionieren könnten.

Wenn Sie nach der zugewiesenen Breite suchen (Polsterung, Rand usw. ignorieren), können Sie diese verwenden.

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

Mit getComputedStyle können Sie auf alle Stile dieser Elemente zugreifen. Zum Beispiel: padding, paddingLeft, margin, border-top-left-radius und so weiter.

Sie können das DOM auch mit ClassName durchsuchen. Beispielsweise:

document.getElementsByClassName("myDiv")

Dies gibt ein Array zurück. Wenn es eine bestimmte Eigenschaft gibt, an der Sie interessiert sind. Zum Beispiel:

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

divWidth wird jetzt gleich der Breite des ersten Elements in Ihrem div-Array sein.

Eigentlich müssen Sie nicht verwenden document.getElementById("mydiv") .
Sie können einfach die ID des div verwenden, wie:

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

Eine weitere Option ist die Verwendung der Funktion getBoundingClientRect. Bitte beachten Sie, dass getBoundingClientRect ein leeres Rect zurückgibt, wenn die Anzeige des Elements 'none' ist.

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

Rufen Sie die folgende Methode für div oder body tag auf. onclick = "show (event);" Funktionsshow (Ereignis) {

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


    }

Der richtige Weg, um den berechneten Stil zu erhalten, besteht darin, zu warten, bis die Seite gerendert wird. Dies kann auf folgende Weise erfolgen. Achten Sie auf das Timeout beim Abrufen von autoWerten.

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

Wenn Sie nur verwenden

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

Sie können autoWerte für Breite und Höhe abrufen, da Browser erst nach dem vollständigen Laden gerendert werden.