Asumsikan bahwa obj adalah kontrol HTML
obj.offsetTop mengacu pada posisi atas obj yang dihitung relatif terhadap tata letak atau koordinat induk yang ditentukan oleh atribut offsetParent, integer, unit pixel.
obj.offsetLeft mengacu pada perhitungan posisi kiri obj relatif terhadap tata letak atau koordinat induk yang ditentukan oleh atribut offsetParent, bilangan bulat, piksel satuan.
obj.offsetWidth mengacu pada lebar absolut dari kontrol obj itu sendiri, tidak termasuk bagian yang tidak ditampilkan karena luapan, yaitu lebar sebenarnya yang ditempati, bilangan bulat, satuan piksel.
obj.offsetHeight mengacu pada tinggi absolut dari kontrol obj itu sendiri, tidak termasuk bagian yang tidak ditampilkan karena luapan, yaitu, tinggi sebenarnya yang ditempati, bilangan bulat, satuan piksel.
Mari kita jelaskan offsetParent yang disebutkan sebelumnya.
offsetParent Mendapatkan referensi ke objek kontainer yang mendefinisikan properti offsetTop dan offsetLeft dari objek tersebut. offsetTop dan offsetParent sangat rumit, browser yang berbeda memiliki interpretasi yang berbeda, dan interpretasinya berbeda lagi, jadi secara umum kita hanya perlu memahami bahwa posisi absolut dari kontrol di browser dapat diperoleh melalui keduanya.
Properti di atas juga berlaku di FireFox.
Selain itu: yang kita bicarakan di sini mengacu pada nilai atribut kontrol HTML, bukan document.body. Nilai document.body memiliki interpretasi berbeda di browser yang berbeda (pada kenyataannya, sebagian besar lingkungan disebabkan oleh interpretasi dokumen yang berbeda. body , bukan karena interpretasi offset yang berbeda)
Kita tahu bahwa offsetTop bisa mendapatkan posisi elemen HTML dari elemen atas atau luar, dan style.top juga bisa digunakan.
1. offsetTop mengembalikan angka, sedangkan style.top mengembalikan string. Selain angka, ia juga memiliki unit: px.
2. offsetTop bersifat hanya baca, sedangkan style.top dapat dibaca dan ditulis.
3. Jika gaya teratas tidak ditentukan untuk elemen HTML, style.top mengembalikan string kosong.
Hal yang sama berlaku untuk offsetLeft dan style.left, offsetWidth dan style.width, offsetHeight dan style.height.
klienTinggi
Setiap orang tidak keberatan dengan clientHeight, mereka semua mengira itu adalah ketinggian dari area yang terlihat dari konten, yang berarti ketinggian dari area di mana konten dapat dilihat di halaman browser toolbar terakhir dan di atas bilah status. Ini tidak ada hubungannya dengan konten halaman.
offsetTinggi
IE dan Opera percaya bahwa offsetHeight = clientHeight + scroll bar + border.
NS dan FF menganggap offsetHeight sebagai tinggi sebenarnya dari konten halaman web, yang bisa lebih kecil dari clientHeight.
gulirTinggi
IE dan Opera menganggap scrollHeight sebagai tinggi sebenarnya dari konten halaman web, yang bisa lebih kecil dari clientHeight.
NS dan FF menganggap scrollHeight sebagai tinggi konten halaman web, tetapi nilai minimumnya adalah clientHeight.
Sederhananya
clientHeight adalah ketinggian area tempat konten dilihat melalui browser.
NS dan FF percaya bahwa offsetHeight dan scrollHeight keduanya merupakan tinggi konten web, tetapi jika tinggi konten web kurang dari atau sama dengan clientHeight, nilai scrollHeight adalah clientHeight, dan offsetHeight bisa lebih kecil dari clientHeight.
IE dan Opera menganggap offsetHeight sebagai area bilah gulir clientHeight yang terlihat plus batas. scrollHeight adalah tinggi sebenarnya dari konten halaman web.
Alasan yang sama
Penjelasan clientWidth, offsetWidth dan scrollWidth sama seperti di atas, tinggal ganti tinggi dengan lebar.
menjelaskan
Di atas didasarkan pada DTD HTML 4.01 Transitional. Jika DTD XHTML 1.0 Transitional, artinya akan berbeda. Dalam XHTML, ketiga nilai ini semuanya adalah nilai yang sama, yang menunjukkan tinggi konten sebenarnya. Sebagian besar versi browser baru mendukung pengaktifan penerjemah berbeda berdasarkan DOCTYPE yang ditentukan pada halaman.
scrollTop adalah nilai ketinggian yang "digulung", contoh:
Copy kode kodenya sebagai berikut:
<divid='p'>
<div id="t">Jika scrollTop disetel ke p, konten ini mungkin tidak ditampilkan sepenuhnya. </div>
</div>
<skrip tipe="teks/javascript">
var p = dokumen.getElementById("p");
p.scrollTop = 10;
</skrip>
Karena scrollTop disetel untuk elemen luar p, elemen dalam akan bergulir ke atas, dan bagian yang digulung adalah scrollTop.
scrollLeft serupa.
Kita telah mengetahui bahwa offsetHeight adalah lebar elemennya sendiri, dan scrollHeight adalah lebar absolut elemen dalam, termasuk bagian tersembunyi dari elemen dalam. Pada gambar di atas, scrollHeight p adalah 300, dan offsetHeight p adalah 100.
scrollWidth serupa.
IE dan FireFox mendukung penuh, sedangkan Netscape 8 dan Opera 7.6 tidak mendukung scrollTop dan scrollLeft (kecuali document.body.scrollTop dan document.body.scrollLeft).
1.Tinggi Klien, Lebar Klien:
Kedua properti ini secara kasar menunjukkan tinggi piksel dan lebar konten elemen. Secara teori, pengukuran ini tidak memperhitungkan penambahan apa pun melalui style sheet.
Margin, batas, dll. dalam elemen.
2.KlienKiri,klienAtas:
Keduanya mengembalikan ketebalan batas di sekitar elemen. Jika Anda tidak menentukan batas atau tidak memposisikan elemen, nilainya adalah 0.
3.gulir ke kiri, gulir ke atas:
Jika elemen dapat di-scroll, Anda dapat menggunakan kedua properti ini untuk mengetahui seberapa jauh elemen telah di-scroll dalam arah horizontal dan vertikal. Satuannya adalah piksel.
Untuk elemen yang tidak dapat di-scroll, nilainya selalu 0.
4. tinggi gulir, lebar gulir:
Tidak peduli berapa banyak objek yang terlihat di halaman, mereka mendapatkan keseluruhannya.
5.gaya.kiri:
Offset elemen yang diposisikan dari tepi kiri persegi panjang yang memuatnya
6.style.pixelKiri:
Mengembalikan nilai piksel bilangan bulat dari offset batas kiri elemen yang diposisikan. Karena nilai atribut non-piksel mengembalikan string yang berisi unit, misalnya 30 piksel. Gunakan atribut ini untuk menangani nilai dalam piksel secara terpisah.
7.gaya:posLetf:
Mengembalikan nilai numerik dari offset batas kiri elemen yang diposisikan, terlepas dari unit yang ditentukan oleh elemen style sheet yang sesuai. Karena nilai non-posisi dari atribut mengembalikan string yang berisi unit, misalnya, 1.2em
Beberapa analogi seperti top, pixelTop, posTop saja sudah cukup.
KIRI: adalah posisi berpindah dari kiri ke kanan, yaitu jarak antara liontin dan tepi kiri layar;
clientLeft mengembalikan jarak antara nilai properti offsetLeft objek dan nilai sebenarnya di sisi kiri jendela saat ini.
offsetLeft mengembalikan nilai kiri objek relatif terhadap tata letak atau koordinat objek induk. Dibutuhkan sudut kiri atas objek induk sebagai asal koordinat, dan koordinat x dalam arah positif sumbu X dan Y. ke kanan dan ke bawah.
pixelLeft menyetel atau mengembalikan posisi objek relatif terhadap sisi kiri jendela
scrollWidth adalah lebar konten sebenarnya dari objek, tidak termasuk lebar tepi, dan akan berubah seiring dengan jumlah konten dalam objek (terlalu banyak konten dapat mengubah lebar objek sebenarnya).
clientWidth adalah lebar objek yang terlihat, tidak termasuk bilah gulir dan tepi lainnya, dan akan berubah seiring dengan ukuran tampilan jendela.
offsetWidth adalah lebar objek yang terlihat, termasuk bilah gulir dan tepi lainnya, dan akan berubah seiring dengan ukuran tampilan jendela.
IE6.0, FF1.06+:
clientWidth = lebar + bantalan
clientHeight = tinggi + bantalan
offsetWidth = lebar + padding + batas
offsetHeight = tinggi + bantalan + batas
IE5.0/5.5:
clientWidth = lebar - batas
clientHeight = batas tinggi
offsetWidth = lebar
offsetTinggi = tinggi
(Perlu disebutkan: atribut margin di CSS tidak ada hubungannya dengan clientWidth, offsetWidth, clientHeight, dan offsetHeight)
offsetwidth: adalah lebar offset elemen relatif terhadap elemen induk. Sama dengan batas+padding+lebar
clientwidth: adalah lebar elemen yang terlihat. Sama dengan padding+lebar
scrollwidth: adalah lebar elemen termasuk bagian bergulir.
offsetLeft: Posisi elemen Html relatif terhadap elemen offsetParentnya sendiri
scrollLeft: Mengembalikan dan menetapkan nilai koordinat tugas gulir horizontal saat ini
Copy kode kodenya sebagai berikut:
<input type="button" value="Klik" onclick="move()">
<div id="d" style="background-color:#ff9966; posisi:absolute; kiri:170px; atas:100px;lebar:300;tinggi:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<skrip bahasa="javascript">
pemindahan fungsi()
{
var d=dokumen.getElementById("d")
a=nilai(20)
d.scrollLeft+=a
}
</skrip>
Simpan sebagai halaman web, jalankan, klik tombol, dan bilah gulir bergerak
Klik pada div, pertama-tama munculkan posisi b relatif terhadap a, lalu munculkan posisi a relatif terhadap jendela.