Saya sering menemukan bahwa ketika menulis JavaScript, Anda perlu menggunakan tinggi dan lebar halaman web, browser atau layar untuk menyelesaikan masalah penentuan posisi tata letak. Anda sering melupakannya sebelum dan sesudah digunakan, atau mencari online, dan cukup merangkumnya sendiri, sehingga lebih mudah menggunakannya lagi, menghemat waktu dan upaya.
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 (dengan lebar batang gulir)
Tinggi teks lengkap dari halaman web: document.body.scrollHeight (dengan tinggi batang gulir)
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+:
Salinan kode adalah sebagai berikut:
clientWidth = lebar + padding
ClientHeight = Tinggi + Padding
OffsetWidth = Lebar + Padding + Border
OffsetHeight = Tinggi + Padding + Border
IE5.0/5.5:
Salinan kode adalah sebagai berikut:
ClientWidth = Width - Border
ClientHeight = Tinggi - Perbatasan
OffsetWidth = Lebar
OffsetHeight = Tinggi
Ringkasan: Ada cukup banyak hal tentang tinggi dan lebar. Saya sendiri tidak mengerti beberapa spesifik. Setelah bereksperimen dengan mereka, beberapa dari mereka memiliki nilai yang sama, sehingga sangat membingungkan dan hanya dapat bergantung pada situasi.