it-swarm.com.de

Wie finde ich die Breite eines div mit Hilfe von rohem JavaScript?

Wie finden Sie die aktuelle Breite eines <div> auf browserübergreifende Weise ohne mit einer Bibliothek wie jQuery?

221
Joda Maki
document.getElementById("mydiv").offsetWidth
332
Andy E

Sie können clientWidth oder offsetWidthMozilla Developer Network-Referenz verwenden.

Es wäre wie:

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

oder mit Rahmenbreite:

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

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

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

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

mit getComputedStyle können Sie auf alle Stile dieser Elemente zugreifen. Zum Beispiel: Auffüllen, Auffüllen links, Rand, oberer linker Radius und so weiter.

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

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 ist jetzt gleich der Breite des ersten Elements in Ihrem div-Array.

3
user3386050

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

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

1
Ari

Eine andere Option ist die Verwendung der Funktion getBoundingClientRect. 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);  
}
0
user4617883

aufruf der Methode "div" oder "body" -Tag.

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


    }
0
Amrik

Der korrekte Weg, einen berechneten Stil zu erhalten, wartet, bis die Seite gerendert wird. Dies kann auf folgende Weise geschehen. Achten Sie auf das Zeitlimit, wenn Sie auto-Werte erhalten.

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 auto-Werte für Breite und Höhe erhalten, da Browser nicht rendern, bis der vollständige Ladevorgang abgeschlossen ist.

0
Siarhei Kuchuk