Jak znaleźć szerokość div za pomocą waniliowego JavaScript?

267

Jak znaleźć aktualną szerokość <div>w sposób zgodny z wieloma przeglądarkami bez korzystania z biblioteki takiej jak jQuery?

Joda Maki
źródło
104
+1 za komentarz „no jQuery” :)
Zlatko,
1
Możliwy duplikat Zrozumienia offsetWidth, clientWidth, scrollWidth i -Height (o co zresztą pytano znacznie później, ale wciąż ma znacznie bardziej rozbudowaną odpowiedź ).

Odpowiedzi:

400
document.getElementById("mydiv").offsetWidth
Andy E.
źródło
8
To lub cientWidth, choć nie znam prawdziwej różnicy.
JCOC611
123
offsetWidthobejmuje szerokość ramki, clientWidthnie ma.
lincolnk
1
Gdy myDiv nie miał reguły CSS, ale w tagu zdefiniowano „szerokość” i „wysokość”, offsetWidth zwrócił szerokość rodzica. To nie problem. Właśnie dodałem regułę CSS i działała dobrze.
okradać
offsetHeight zawsze wynosi zero w IE11
nim
4
@nim, jeśli twoja div ma display: nonelub nie jest częścią dokumentu, zawsze będzie miała zerową wysokość odsunięcia.
Andy E
38

Możesz użyć clientWidthlub offsetWidth odniesienia do sieci dla programistów Mozilla

To byłoby jak:

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

lub z szerokością ramek:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width
khrizenriquez
źródło
9

Wszystkie odpowiedzi są prawidłowe, ale nadal chcę podać inne alternatywy, które mogą działać.

Jeśli szukasz przypisanej szerokości (ignorując wypełnienie, margines itp.), Możesz użyć.

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

getComputedStyle pozwala na dostęp do wszystkich stylów tego elementu. Na przykład: padding, paddingLeft, margin, border-top-left-radius i tak dalej.

Alex Flexlex Waldboth
źródło
4

Możesz także przeszukiwać DOM za pomocą ClassName. Na przykład:

document.getElementsByClassName("myDiv")

To zwróci tablicę. Jeśli interesuje Cię jedna konkretna nieruchomość. Na przykład:

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

divWidth będzie teraz równa szerokości pierwszego elementu w tablicy div.

użytkownik3386050
źródło
2

W rzeczywistości nie musisz używać document.getElementById("mydiv") .
Możesz po prostu użyć identyfikatora div, takiego jak:

var w = mydiv.clientWidth;
lub
var w = mydiv.offsetWidth;
itp.

Ari
źródło
1

Inną opcją jest użycie funkcji getBoundingClientRect. Należy pamiętać, że getBoundingClientRect zwróci pusty prostokąt, jeśli wyświetlany element ma wartość „none”.

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}
użytkownik4617883
źródło
0

wywołaj metodę poniżej na div lub body tag onclick = "show (event);" funkcja pokaż (zdarzenie) {

        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
źródło
0

Prawidłowy sposób uzyskania obliczonego stylu czeka na wyrenderowanie strony. Można to zrobić w następujący sposób. Zwróć uwagę na czas oczekiwania na uzyskanie autowartości.

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

Jeśli używasz tylko

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

możesz uzyskać autowartości szerokości i wysokości, ponieważ przeglądarki nie renderują się do momentu pełnego załadowania.

Siarhei Kuchuk
źródło