Bagaimana menemukan lebar div menggunakan JavaScript vanilla?

Jawaban:

400 
document.getElementById("mydiv").offsetWidth
Andy E
sumber
8
Itu, atau cientWidth, meskipun aku tidak tahu bedanya.
JCOC611
123
offsetWidthtermasuk lebar perbatasan, clientWidthtidak.
lincolnk
1
Ketika myDiv tidak memiliki aturan CSS tetapi memiliki "width" dan "height" yang ditentukan dalam tag, offsetWidth mengembalikan lebar induk. Bukan masalah saya baru saja menambahkan aturan CSS dan itu bekerja dengan baik.
merampok
offsetHeight selalu nol di IE11
nim
4
@nim jika div Anda memiliki display: noneatau bukan bagian dari dokumen, itu akan selalu memiliki tinggi nol offset.
Andy E
38

Anda dapat menggunakan clientWidthatau offsetWidth referensi jaringan pengembang Mozilla

Itu akan seperti:

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

atau dengan lebar batas:

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

Semua Jawaban benar, tetapi saya masih ingin memberikan beberapa alternatif lain yang mungkin berhasil.

Jika Anda mencari lebar yang ditetapkan (mengabaikan bantalan, margin, dan sebagainya) yang bisa Anda gunakan.

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

getComputedStyle memungkinkan Anda mengakses semua gaya elemen itu. Misalnya: padding, paddingLeft, margin, border-top-left-radius dan sebagainya.

Alex Flexlex Waldboth
sumber
4

Anda juga dapat mencari DOM menggunakan ClassName. Sebagai contoh:

document.getElementsByClassName("myDiv")

Ini akan mengembalikan array. Jika ada satu properti tertentu yang Anda minati. Misalnya:

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

divWidth sekarang akan sama dengan lebar elemen pertama di array div Anda.

pengguna3386050
sumber
2

Sebenarnya, Anda tidak harus menggunakan document.getElementById("mydiv") .
Anda cukup menggunakan id div, seperti:

var w = mydiv.clientWidth;
atau
var w = mydiv.offsetWidth;
dll.

Ari
sumber
1

Opsi lain adalah menggunakan fungsi getBoundingClientRect. Harap dicatat bahwa getBoundingClientRect akan mengembalikan kotak kosong jika tampilan elemen 'tidak ada'.

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

panggil metode di bawah ini di div atau tag tubuh onclick = "show (event);" acara fungsi (acara) {

        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
sumber
0

Cara yang benar untuk mendapatkan gaya komputasi adalah menunggu sampai halaman ditampilkan. Itu bisa dilakukan dengan cara berikut. Perhatikan batas waktu untuk mendapatkan autonilai.

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

Jika Anda menggunakan hanya 

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

Anda bisa mendapatkan autonilai untuk lebar dan tinggi karena browser tidak membuat sampai beban penuh dilakukan.

Siarhei Kuchuk
sumber