offsetTop
Mendapatkan posisi teratas objek yang dihitung relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetParent.
offsetKiri
Mendapatkan perhitungan posisi kiri objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetParent.
offsetTinggi
Mendapatkan tinggi objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetParent.
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.
lebar offset
Mendapatkan lebar objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetParent.
offsetParent
Mendapatkan referensi ke objek kontainer yang mendefinisikan properti offsetTop dan offsetLeft dari objek tersebut.
klienTinggi
Mendapatkan tinggi suatu objek, tanpa menghitung margin, batas, bilah gulir, atau bantalan apa pun yang mungkin diterapkan pada objek.
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.
klienKiri
Mendapatkan jarak antara properti offsetLeft dan sisi kiri sebenarnya dari area klien.
klienTop
Mendapatkan jarak antara properti offsetTop dan bagian atas sebenarnya dari area klien.
lebar klien
Mendapatkan lebar suatu objek, tanpa menghitung margin, batas, bilah gulir, atau padding apa pun yang mungkin diterapkan pada objek.
Atribut GULIR
menggulir
Menyetel atau mengetahui apakah pengguliran dimatikan.
gulirTinggi
Dapatkan tinggi gulir objek.
gulir ke kiri
Menetapkan atau mendapatkan jarak antara tepi kiri objek dan tepi paling kiri dari konten yang terlihat saat ini di jendela.
gulirAtas
Mengatur atau mendapatkan jarak antara bagian atas objek dan bagian atas konten yang terlihat di jendela.
gulirLebar
Mendapatkan lebar gulir objek. atribut acara
X
Menetapkan atau mendapatkan koordinat x-piksel dari posisi penunjuk tetikus relatif terhadap dokumen induk.
layarX
Menetapkan atau mendapatkan koordinat x posisi penunjuk tetikus relatif terhadap layar pengguna
offsetX
Menetapkan atau mendapatkan koordinat x posisi penunjuk tetikus relatif terhadap objek yang memicu peristiwa.
klienX
Menetapkan atau mendapatkan koordinat x dari posisi penunjuk tetikus relatif terhadap area klien pada jendela, di mana area klien tidak menyertakan kontrol dan bilah gulir jendela itu sendiri.
Di sini kita berbicara tentang interpretasi empat browser tentang clientHeight, offsetHeight dan scrollHeight dari document.body. Di sini kita berbicara tentang document.body. Jika ini adalah kontrol HTML, itu berbeda.
Keempat browser tersebut adalah IE (Internet Explorer), NS (Netscape), Opera, dan FF (FireFox).
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.
Tetapi
FF mengartikan clientHeight secara berbeda di DOCTYPE yang berbeda, tetapi xhtml 1 trasitional tidak menafsirkannya seperti di atas. Browser lain tidak mengalami masalah ini.
js mendapatkan tinggi halaman
Copy kode kodenya sebagai berikut:
<skrip>
fungsi dapatkanInfo()
{
vars = "";
s += "Lebar area halaman web yang terlihat:"+ document.body.clientWidth;
s += "Tinggi area halaman web yang terlihat:"+ document.body.clientHeight;
s += "Lebar area halaman web yang terlihat: "+ document.body.offsetWidth + " (termasuk lebar tepi dan bilah gulir)";
s += "Tinggi area halaman web yang terlihat: "+ document.body.offsetHeight + " (termasuk lebar garis samping)";
s += "Lebar teks lengkap teks halaman web:"+ document.body.scrollWidth;
s += "Tinggi teks lengkap badan halaman web:"+ document.body.scrollHeight;
s += "Ketinggian halaman web yang di-scroll (ff):"+ document.body.scrollTop;
s += "Ketinggian halaman web yang di-scroll (yaitu):"+ document.documentElement.scrollTop;
s += "Sisi kiri halaman web di-scroll:"+ document.body.scrollLeft;
s += "Di bagian utama halaman web: "+ window.screenTop;
s += "Bagian teks halaman web tersisa:"+ window.screenLeft;
s += "Ketinggian resolusi layar:"+ window.screen.height;
s += "Lebar resolusi layar:"+ window.screen.width;
s += "Tinggi area kerja layar yang tersedia:"+ window.screen.availHeight;
s += "Lebar area kerja layar yang tersedia:"+ window.screen.availWidth;
s += "Pengaturan layar Anda adalah "+ window.screen.colorDepth +" bit color";
s += "Pengaturan layar Anda" + window.screen.deviceXDPI +" Piksel/inci";
//peringatan;
}
dapatkanInfo();
</skrip>
Dalam tes lokal saya:
Dapat digunakan di bawah IE, FireFox, Opera
dokumen.body.clientWidth
dokumen.body.clientHeight
Tersedia, sederhana, dan nyaman.
Dan di antara proyek perusahaan:
Opera masih menggunakan
dokumen.body.clientWidth
dokumen.body.clientHeight
Tapi IE dan FireFox menggunakan
dokumen.documentElement.clientWidth
dokumen.documentElement.clientHeight
Ternyata standar W3C menimbulkan masalah.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Jika Anda menambahkan baris tag ini ke halaman
Di IE:
document.body.clientWidth ==> Lebar objek BODY
document.body.clientHeight ==> Tinggi objek BODY
document.documentElement.clientWidth ==> Lebar area yang terlihat
document.documentElement.clientHeight ==> Tinggi area yang terlihat
Di FireFox:
document.body.clientWidth ==> Lebar objek BODY
document.body.clientHeight ==> Tinggi objek BODY
document.documentElement.clientWidth ==> Lebar area yang terlihat
document.documentElement.clientHeight ==> Tinggi area yang terlihat
Di Opera:
document.body.clientWidth ==> Lebar area yang terlihat
document.body.clientHeight ==> Tinggi area yang terlihat
document.documentElement.clientWidth ==> Lebar objek halaman (yaitu, lebar objek BODY ditambah lebar Margin)
document.documentElement.clientHeight ==> Tinggi objek halaman (yaitu, tinggi objek BODY ditambah tinggi Margin)
Dan jika tidak ada standar W3C yang ditentukan, maka
yaitu:
dokumen.documentElement.clientWidth ==> 0
dokumen.documentElement.clientHeight ==> 0
FireFox adalah:
document.documentElement.clientWidth ==> Lebar objek halaman (yaitu, lebar objek BODY ditambah lebar Margin) document.documentElement.clientHeight ==> Tinggi objek halaman (yaitu, tinggi objek BODY ditambah tinggi Margin)
Opera adalah:
document.documentElement.clientWidth ==> Lebar objek halaman (yaitu, lebar objek BODY ditambah lebar Margin) document.documentElement.clientHeight ==> Tinggi objek halaman (yaitu, tinggi objek BODY ditambah tinggi Margin)
Ini benar-benar merepotkan. Faktanya, dari sudut pandang pengembangan, akan lebih mudah jika memiliki lebih sedikit objek dan metode dan tidak menggunakan standar terbaru.