Dapatkan kotak sempadan elemen div: kaedah pelaksanaan jQuery

Question

Saya mahu mengira kotak sempadan elemen div melalui jQuery/JavaScript.

Saya mencuba kod berikut:

//Sebelah kiri kotak
document.getElementById("myElement").offsetLeft;
//Atas kotak
document.getElementById("myElement").offsetTop;
//sebelah kanan kotak
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth;
//bawah kotak
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

Ia mengembalikan beberapa nilai. Adakah ini cara yang betul untuk mendapatkan kotak sempadan elemen div melalui jQuery/JavaScript.

Saya memerlukan sesuatu yang serupa dengan kaedah getBBox() Ia akan mengembalikan x, y, lebar dan tinggi Begitu juga, bagaimana saya boleh mendapatkan kotak sempadan unsur div?

Answer 1

Memandangkan ini ditandakan khusus untuk jQuery -

$("#myElement")[0].getBoundingClientRect();

atau

$("#myElement").get(0).getBoundingClientRect();

(Kedua-duanya fungsinya sama, .get() lebih laju sedikit dalam sesetengah pelayar lama)

Sila ambil perhatian bahawa jika anda cuba mendapatkan nilai melalui panggilan jQuery, ia tidak akan mengambil kira sebarang nilai transformasi css, yang mungkin membawa kepada hasil yang tidak dijangka...

Nota 2: Dalam jQuery 3.0 ia telah ditukar untuk menggunakan panggilan getBoundingClientRect() yang sesuai untuk panggilan saiznya sendiri (lihat Panduan Naik Taraf jQuery Core 3.0) - bermakna jawapan jQuery yang lain akhirnya akan sentiasa betul - tetapi hanya jika betul apabila menggunakan versi jQuery baharu - itulah sebabnya ia dipanggil perubahan pecah...

Answer 2

Anda boleh mendapatkan kotak sempadan mana-mana elemen dengan memanggil kaedah getBoundingClientRect.

var rect = document.getElementById("myElement").getBoundingClientRect();

Ini akan mengembalikan objek dengan medan kiri, atas, lebar dan ketinggian.