JS mendapat offsettop, offsetleft dan properti lainnya dari elemen
OBJ.ClientWidth // Dapatkan lebar elemen
obj.clientheight // ketinggian elemen
obj.offsetleft // elemen relatif terhadap elemen induk kiri
obj.offsettop // bagian atas elemen relatif terhadap elemen induk
obj.offsetwidth // lebar elemen
obj.offsetheight // ketinggian elemen
Perbedaannya:
clientWidth = lebar + padding
ClientHeight = Tinggi + Padding
OffsetWidth = Lebar + Padding + Border
OffsetHeight = Lebar + Padding + Border
Offset memiliki lebih banyak lebar perbatasan daripada klien
// Dapatkan koordinat horizontal dari elemen (relatif ke jendela) fungsi gettop (e) {var offset = e.offsettop; if (e.offsetparent! = null) offset+= getTop (e.offsetParent); return offset;} // Dapatkan koordinat horizontal dari elemen (relatif ke jendela) fungsi getleft (e) {var offset = e.offsetleft; if (e.offsetparent! = null) offset+= getLeft (E.OffsetParent); return offset;}Saya juga telah menulis artikel JS tentang mendapatkan lokasi elemen: JS memperoleh offsettop elemen, offsetleft dan atribut lainnya. Kita dapat memperoleh posisi elemen relatif ke jendela melalui atribut offsettop dan offsetleft, tetapi atribut offsettop dan offsetleft keduanya diposisikan relatif terhadap elemen induk, dan elemen yang biasanya perlu mendapatkan posisi tidak pada lapisan terluar, sehingga atribut terkait offset yang melintasi elemen atas tidak mungkin. Maka efisiensi menjadi masalah.
// Dapatkan koordinat horizontal dari elemen (relatif ke jendela) fungsi getTop (e) {var offset = e.offsettop; if (e.offsetparent! = Null) offset+= getTop (e.offsetparent); return offset;} // Dapatkan koordinat horizontal dari elemen (relatif ke jendela). Offset = E.Offsetleft; if (e.offsetparent! = null) offset+= getLeft (e.offsetParent); return offset;}Untungnya, browser memberi saya antarmuka yang sesuai GetBoundingClientRect. Metode ini pertama kali muncul di browser IE. Browser kemudian juga mendukung metode ini, dan itu lebih sempurna. Dalam IE, mereka hanya bisa mendapatkan atribut elemen kiri, atas, bawah, dan kanan, dan browser modern kemudian juga bisa mendapatkan lebar dan lebar elemen.
| Chrome | Firefox (tokek) | Penjelajah Internet | Opera | Safari |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (Ya) | 4.0 |
Perlu dicatat di sini bahwa bagian bawah adalah jarak antara bagian bawah elemen dan bagian atas jendela, daripada bagian bawah posisi dalam CSS relatif ke bagian bawah jendela. Demikian pula, atribut rihgt adalah jarak antara elemen paling kanan dan sisi kiri jendela.
var box = document.geteLementById ("box"); var pos = box.getBoundingClientRect (); box.innerHtml = "atas:"+pos.top+"kiri:"+pos.left+"bawah:"+pos.bottom+"kanan:"+pos.right+"lebar:"+pos.width+"heighe" heighe: hight: hight: hight: hight: hight: hight: hight: hight: hight: handtom: "hight:" hight: "hight:" hight: "hight:" hight: "hight:" hight.Artikel asli, harap tunjukkan cetak ulang: dicetak ulang dari pengembangan front-end