Wie finde ich die Breite eines Div mit Vanilla JavaScript?

266

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

javascript html

— Joda Maki
quelle

104

+1 für den Kommentar "no jQuery" :)

— Zlatko

1

Mögliches Duplikat von Understanding offsetWidth, clientWidth, scrollWidth bzw. -Height (das zwar viel später gefragt wurde, aber noch eine viel ausführlichere Antwort hat ).

399

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

— Andy E.
quelle

8

Das oder cientWidthobwohl ich den wirklichen Unterschied nicht kenne.

— JCOC611

123

offsetWidthenthält Randbreite, clientWidthnicht.

— Lincolnk

1

Wenn myDiv keine CSS-Regel hatte, aber "width" und "height" im Tag definiert waren, gab offsetWidth die übergeordnete Breite zurück. Kein Problem, ich habe gerade die CSS-Regel hinzugefügt und es hat gut funktioniert.

— Rob

offsetHeight immer null in IE11

— nim

4

@nim Wenn Ihr div display: noneTeil des Dokuments ist oder nicht, hat es immer eine Versatzhöhe von Null.

— Andy E

38

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

— khrizenriquez
quelle

9

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.

— Alex Flexlex Waldboth
quelle

4

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.

— user3386050
quelle

2

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.

— Ari
quelle

1

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

— user4617883
quelle

0

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


    }

— Amrik
quelle

0

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.

— Siarhei Kuchuk
quelle