Terkadang, dalam proyek, Anda menggunakan JS untuk mendapatkan posisi elemen untuk menemukan elemen. Pertama, gunakan gambar untuk menjelaskan hubungan antara scrollwidth, clientwidth, dan offsetwidth.
Pengantar singkat untuk JS memperoleh berbagai lebar dan ketinggian :
ScrollHeight: Mendapat ketinggian gulir objek.
Scrollleft: atur atau dapatkan jarak antara batas kiri objek dan ujung paling kiri dari konten yang saat ini terlihat di jendela
Scrolltop: atur atau dapatkan jarak antara bagian atas objek dan bagian atas konten yang terlihat di jendela
Scrollwidth: Dapatkan lebar gulir objek
OffsetHeight: Mendapat ketinggian objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetparent koordinat induk
Offsetleft: Mendapat posisi kiri yang dihitung dari objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetparent
Offsettop: Mendapat posisi teratas yang dihitung dari objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsettop
event.clientx koordinat horizontal relatif terhadap dokumen
event.clienty vertikal koordinat relatif terhadap dokumen
koordinat horizontal event.offsetx relatif terhadap wadah
koordinat vertikal peristiwa relatif terhadap wadah
document.documentelement.scrolltop Nilai menggulir secara vertikal
event.clientx + document.documentelement.scrolltop relatif terhadap koordinat horizontal dokumen + jumlah pengguliran dalam arah vertikal
Di atas terutama mengacu pada IE, dan perbedaan dalam Firefox adalah sebagai berikut:
IE6.0, FF1.06+:
clientWidth = lebar + padding
ClientHeight = Tinggi + Padding
OffsetWidth = Lebar + Padding + Border
OffsetHeight = Tinggi + Padding + Border
IE5.0/5.5:
ClientWidth = Width - Border
ClientHeight = Tinggi - Perbatasan
OffsetWidth = Lebar
OffsetHeight = Tinggi
(Harus disebutkan bahwa atribut margin di CSS tidak ada hubungannya dengan ClientWidth, OffsetWidth, ClientHeight, dan OffsetHeight)
OffsetWidth (lebar+padding+perbatasan)
Asumsikan OBJ adalah kontrol HTML.
Obj.offsettop mengacu pada posisi, integer, unit piksel dari OBJ ke kontrol atas atau atas.
OBJ.Offsetleft mengacu pada posisi, integer, unit piksel dari OBJ ke kontrol kiri atau atas.
OBJ.OffsetWidth mengacu pada lebar lebar, integer, dan unit piksel dari kontrol OBJ itu sendiri. Mendapat lebar konten yang terlihat dari objek, tidak termasuk bilah gulir, dan perbatasan;
Obj.Offsetheight mengacu pada ketinggian, bilangan bulat, unit piksel dari kontrol OBJ itu sendiri.
Perbedaan antara offsetwidth dan style.width
1. Offsettop mengembalikan angka, sementara style.top mengembalikan string, yang juga berisi unit: px selain angka.
2. Offsettop hanya baca, sedangkan style.top adalah baca-tulis.
3. Jika tidak ada gaya teratas yang ditentukan untuk elemen HTML, maka Style.top mengembalikan string kosong.