Vanilya JavaScript kullanarak div genişliği nasıl bulunur?

Nasıl bir akım genişliği bulurum <div>bir çapraz tarayıcı uyumlu bir şekilde olmadan jQuery gibi bir kitaplığı kullanarak?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

Sen kullanabilirsiniz clientWidthveya offsetWidth Mozilla geliştiricisi ağ referansını

Şöyle olurdu:

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

veya kenar genişliği ile:

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

Tüm Yanıtlar doğrudur, ancak yine de işe yarayabilecek başka alternatifler vermek istiyorum.

Atanan genişliği arıyorsanız (dolgu, kenar boşluğu vb. Yoksay) kullanabilirsiniz.

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

getComputedStyle bu öğelerin tüm stillerine erişmenizi sağlar. Örneğin: dolgu, dolgu Sol, kenar boşluğu, sınır-üst-sol yarıçapı vb.

DOM'u ClassName kullanarak da arayabilirsiniz. Örneğin:

document.getElementsByClassName("myDiv")

Bu bir dizi döndürür. İlgilendiğiniz belirli bir mülk varsa. Örneğin:

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

divWidth şimdi div dizinizdeki ilk öğenin genişliğine eşit olacak.

Aslında, kullanmak zorunda değilsiniz document.getElementById("mydiv") .
Sadece gibi div id kullanabilirsiniz:

var w = mydiv.clientWidth;
ya
var w = mydiv.offsetWidth;
vs.

Başka bir seçenek getBoundingClientRect işlevini kullanmaktır. Öğenin ekranı 'none' ise getBoundingClientRect'in boş bir rekt döndüreceğini lütfen unutmayın.

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

div veya body etiketinde aşağıdaki yöntemi çağırın onclick = "show (event);" function show (etkinlik) {

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


    }

Hesaplanan stili almanın doğru yolu sayfa görüntülenene kadar beklemektir. Aşağıdaki şekilde yapılabilir. Değer alma zaman aşımına dikkat edin auto.

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

Eğer sadece

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

autotam yükleme yapılana kadar tarayıcılar görüntülenmediği için genişlik ve yükseklik değerleri alabilirsiniz .