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

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

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

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

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.

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.

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.

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

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


    }

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.