Bagaimana menemukan lebar div menggunakan JavaScript vanilla?

267

Bagaimana Anda menemukan lebar saat ini <div>dalam cara yang kompatibel lintas-browser tanpa menggunakan perpustakaan seperti jQuery?

javascript html

— Joda Maki
sumber

104

+1 untuk komentar "no jQuery" :)

— Zlatko

1

Kemungkinan duplikat Pengertian offsetWidth, clientWidth, scrollWidth, dan -Height, masing-masing (yang, memang, telah ditanyakan kemudian, tetapi masih memiliki jawaban yang jauh lebih rumit ).

400

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

— 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