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.
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; tubuh; di lingkungan DOM, jika Anda ingin mendapatkan ukuran jendela, Anda perlu memperhatikan ukuran elemen root, bukan elemennya.
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.
Kode Implementasi <! ―666666 secara ―6666666AN ALD
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Harap sesuaikan jendela browser </iteme>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
</head>
<body>
<h2 align = "center"> Harap sesuaikan ukuran jendela browser </h2> <hr>
<Form Action = "#" Method = "Get" Name = "Form1" ID = "Form1">
<! Tunjukkan ukuran sebenarnya dari jendela browser>
Tinggi sebenarnya dari jendela browser: <input type = "text" name = "friendheight" size = "4"> <br>
Lebar sebenarnya dari jendela browser: <input type = "text" name = "availwidth" size = "4"> <br>
</form>
<type skrip = "Teks/JavaScript">
<!
var winwidth = 0;
var winheight = 0;
Fungsi findDimensions () // Fungsi: Dapatkan dimensi
{
// Dapatkan lebar jendela
if (window.innerwidth)
winwidth = window.innerwidth;
else if ((document.body) && (document.body.clientwidth)))
winwidth = document.body.clientwidth;
// Dapatkan tinggi jendela
if (window.innerheight)
WinHeight = window.innerheight;
else if ((document.body) && (document.body.clientHeight)))
WinHeight = document.body.clientHeight;
// Klik ukuran jendela dengan mendeteksi tubuh jauh di dalam dokumen untuk mendapatkan ukuran tubuh
if (document.documentelement && document.documentelement.clientheight && document.documentelement.clientwidth)
{
WinHeight = document.documentelement.clientHeight;
winwidth = document.documentelement.clientwidth;
}
// Hasilnya adalah output ke dua kotak teks
Document.Form1.availheight.Value = WinHeight;
document.form1.availwidth.value = winwidth;
}
findDimensions ();
// Memanggil fungsi untuk mendapatkan nilainya
window.onresize = findimensions;
///
</script>
</body>
</html>
Interpretasi program sumber
(1) Program pertama kali membuat formulir yang berisi dua kotak teks untuk menampilkan lebar dan tinggi saat ini jendela, dan nilainya akan berubah dengan perubahan ukuran jendela.
(2) Dalam kode JavaScript berikutnya, dua variabel Winwidth dan WinHeight pertama kali didefinisikan untuk menghemat nilai tinggi dan lebar jendela.
(3) Kemudian, dalam fungsi findDimensions (), gunakan window.innerheight dan window.innerwidth untuk mendapatkan tinggi dan lebar jendela, dan simpan keduanya dalam dua variabel di atas.
(4) Kemudian, dengan masuk ke dalam dokumen, mendeteksi tubuh, mendapatkan ukuran jendela, dan menyimpannya di dua variabel di atas.
(5) Di akhir fungsi, hasilnya adalah output ke dua kotak teks dengan mengakses elemen formulir dengan nama.
(6) Di akhir kode JavaScript, lengkapi seluruh operasi dengan memanggil fungsi findDimensions ().