Lebar area yang terlihat dari halaman web: document.body.clientwidth
Tinggi area yang terlihat dari halaman web: document.body.clientHeight
Lebar area yang terlihat dari halaman web: document.body.offsetwidth (termasuk lebar garis tepi)
Tinggi area yang terlihat dari halaman web: document.body.offsetHeight (termasuk lebar garis tepi)
Lebar teks lengkap dari halaman web: document.body.scrollwidth
Teks lengkap dari halaman web: document.body.scrollheight
Halaman web diluncurkan pada tingkat tinggi: document.body.scrolltop
Kiri halaman web sedang diluncurkan: document.body.scrollleft
Di bagian utama halaman web: window.screentop
Kiri teks utama halaman web: window.screenleft
Resolusi Layar Tinggi: Window.Screen.Height
Lebar resolusi layar: window.screen.width
Layar Tersedia Tinggi Ruang Kerja: Window.Screen.AvailHeight
Layar Tersedia Lebar Ruang Kerja: Window.Screen.availwidth
HTML Precise Positioning: Scrollleft, Scrollwidth, ClientWidth, OffsetWidth
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
Yaitu, perbedaan 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)
－－－－－－－－－－－－－－－－－－－
Sorotan teknis
Kode di bagian ini terutama menggunakan beberapa properti dari objek dokumen tentang jendela. Fungsi utama dan penggunaan sifat -sifat ini adalah sebagai berikut.
Untuk mendapatkan ukuran jendela, sifat dan metode yang berbeda perlu digunakan untuk browser yang berbeda: untuk mendeteksi ukuran jendela yang sebenarnya, Anda perlu menggunakan atribut jendela di bawah Netscape; untuk mendeteksi tubuh di IE; Untuk mendapatkan ukuran jendela, Anda perlu memperhatikan ukuran elemen root, bukan elemen.
Properti bagian dalam objek jendela berisi lebar internal jendela saat ini. Properti bagian dalam objek jendela berisi ketinggian internal jendela saat ini.
Atribut tubuh dari objek dokumen sesuai dengan tag dokumen HTML. Properti DocumentElement dari objek dokumen mewakili simpul root dari dokumen HTML.
Document.Body.ClientHeight mewakili ketinggian jendela saat ini di mana dokumen HTML berada. Document.Body.ClientWidth mewakili lebar saat ini jendela di mana dokumen HTML berada.
Sedikit penelitian tentang mendapatkan ukuran jendela yang terlihat di berbagai browser.
Dalam tes lokal saya: dapat digunakan di bawah IE, Firefox, dan Opera
document.body.clientwidth
Document.Body.ClientHeight dapat diperoleh, sangat sederhana dan nyaman.
Dalam proyek perusahaan: Opera masih digunakan
document.body.clientwidth
document.body.clientHeight
Tapi penggunaan Firefox
Document.DocumentElement.clientwidth
Document.DocumentElement.ClientHeight
Ternyata standar W3C menyebabkan masalah http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
Jika Anda menambahkan baris ini ke halaman
Di IE: document.body.clientwidth ==> lebar objek tubuh
document.body.clientHeight ==> Tinggi Objek Tubuh
document.documentelement.clientwidth ==> lebar area yang terlihat
Document.DocumentElement.clientHeight ==> Tinggi area yang terlihat
Di firefox: document.body.clientwidth ==> lebar objek tubuh
document.body.clientHeight ==> Tinggi Objek Tubuh
document.documentelement.clientwidth ==> lebar area yang terlihat
Document.documentElement.clientHeight ==> Tinggi area yang terlihat?
Dalam opera: document.body.clientwidth ==> lebar area yang terlihat
document.body.clientHeight ==> Tinggi area yang terlihat
Document.DocumentElement.ClientWidth ==> Lebar objek halaman (mis. Lebar objek tubuh ditambah lebar margin) dokumen.documentElement.clientHeight ==> Tinggi objek halaman (mis. Tinggi objek tubuh ditambah tinggi margin)
Jika tidak ada standar untuk W3C,
Kemudian IE adalah: document.documentelement.clientwidth ==> 0
Document.DocumentElement.clientHeight ==> 0
Firefox adalah: document.documentelement.clientwidth ==> Lebar objek halaman (mis. Lebar objek tubuh ditambah lebar margin)
Document.DocumentElement.ClientHeight ==> Halaman Tinggi Objek (mis. Tinggi Objek Tubuh Plus Tinggi Margin)
Opera IS: Document.DocumentElement.ClientWidth ==> Lebar objek halaman (mis. Lebar objek tubuh ditambah lebar margin)
Document.DocumentElement.ClientHeight ==> Halaman Tinggi Objek (mis. Tinggi Objek Tubuh Plus Tinggi Margin)
Ini benar -benar merepotkan. Bahkan, dari perspektif desain dan pengembangan front-end, lebih baik memiliki lebih sedikit objek dan metode daripada tidak menggunakan standar terbaru. Tetapi jika Anda tidak dapat mengikuti tren, Anda tidak akan pernah menjadi desainer senior, jadi kami masih harus memahami dan menguasai pengetahuan ini.