Lebar area halaman web yang terlihat: document.body.clientWidth
Ketinggian area halaman web yang terlihat: document.body.clientHeight
Lebar area halaman web yang terlihat: document.body.offsetWidth (termasuk lebar tepinya)
Ketinggian area halaman web yang terlihat: document.body.offsetHeight (termasuk lebar tepinya)
Lebar teks lengkap badan halaman web: document.body.scrollWidth
Tinggi teks lengkap badan halaman web: document.body.scrollHeight
Ketinggian halaman web yang sedang di-scroll: document.body.scrollTop
Sisi kiri halaman web yang sedang di-scroll: document.body.scrollLeft
Di bagian utama halaman web: window.screenTop
Bagian kiri badan utama halaman web: window.screenLeft
Resolusi layar tinggi: window.screen.height
Lebar resolusi layar: window.screen.width
Tinggi area kerja layar yang tersedia: window.screen.availHeight
Lebar area kerja layar yang tersedia: window.screen.availWidth
Pemosisian HTML yang tepat: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: Mendapatkan tinggi gulir objek.
scrollLeft: Mengatur atau mendapatkan jarak antara tepi kiri objek dan ujung paling kiri dari konten yang terlihat saat ini di jendela
scrollTop: Mengatur atau mendapatkan jarak antara bagian atas objek dan bagian atas konten yang terlihat di jendela
scrollWidth: Dapatkan lebar gulir objek
offsetHeight: Mendapatkan tinggi objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetParent dari koordinat induk.
offsetLeft: Mendapatkan perhitungan posisi kiri objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetParent.
offsetTop: Mendapatkan perhitungan posisi teratas objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetTop
event.clientX koordinat horizontal relatif terhadap dokumen
koordinat vertikal event.clientY relatif terhadap dokumen
event.offsetX koordinat horizontal relatif terhadap wadah
event.offsetY koordinat vertikal relatif terhadap wadah
document.documentElement.scrollNilai teratas untuk pengguliran vertikal
event.clientX+document.documentElement.scrollTop Koordinat horizontal relatif terhadap dokumen + jumlah pengguliran vertikal
Perbedaan IE dan FireFox adalah sebagai berikut:
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 = tinggi - batas
offsetWidth = lebar
offsetTinggi = tinggi
(Perlu disebutkan: atribut margin di CSS tidak ada hubungannya dengan clientWidth, offsetWidth, clientHeight, dan offsetHeight)
Lebar area halaman web yang terlihat: document.body.clientWidth
Ketinggian area halaman web yang terlihat: document.body.clientHeight
Lebar area halaman web yang terlihat: document.body.offsetWidth (termasuk lebar tepinya)
Ketinggian area halaman web yang terlihat: document.body.offsetHeight (termasuk tinggi tepinya)
Lebar teks lengkap badan halaman web: document.body.scrollWidth
Tinggi teks lengkap badan halaman web: document.body.scrollHeight
Ketinggian halaman web yang digulir: document.body.scrollTop
Sisi kiri halaman web yang sedang di-scroll: document.body.scrollLeft
Di bagian utama halaman web: window.screenTop
Bagian kiri badan utama halaman web: window.screenLeft
Ketinggian resolusi layar: window.screen.height
Lebar resolusi layar: window.screen.width
Tinggi area kerja layar yang tersedia: window.screen.availHeight
Lebar area kerja layar yang tersedia: window.screen.availWidth
－－－－－－－－－－－－－－－－－－
Poin teknis
Kode di bagian ini terutama menggunakan beberapa properti objek Dokumen mengenai jendela. Fungsi utama dan penggunaan properti ini adalah sebagai berikut.
Untuk mengetahui ukuran jendela, properti dan metode yang berbeda perlu digunakan untuk browser yang berbeda: untuk mendeteksi ukuran sebenarnya dari jendela, Anda perlu menggunakan properti Jendela di bawah Netscape; Dokumen untuk mendeteksi isi; Di lingkungan DOM, jika Anda ingin mendapatkan ukuran jendela, Anda perlu memperhatikan ukuran elemen root, bukan elemennya.
Properti innerWidth dari objek Window berisi lebar bagian dalam jendela saat ini. Properti innerHeight dari objek Window berisi tinggi bagian dalam dari jendela saat ini.
Atribut body objek Dokumen sesuai dengan tag dokumen HTML. Properti documentElement dari objek Dokumen mewakili simpul akar dokumen HTML.
document.body.clientHeight mewakili ketinggian jendela tempat dokumen HTML berada. document.body.clientWidth mewakili lebar jendela saat ini tempat dokumen HTML berada.
Menerapkan kode
Copy kode kodenya 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">
<kepala>
<title>Silakan ubah ukuran jendela browser</title>
<meta http-equiv="content-type" content="teks/html; charset=gb2312">
</kepala>
<tubuh>
<h2 align="center">Harap ubah ukuran jendela browser</h2><hr>
<formulir tindakan="#" metode="dapatkan" nama="form1" id="form1">
<!--Tampilkan ukuran sebenarnya dari jendela browser-->
Ketinggian sebenarnya dari jendela browser: <input type="text" name="availHeight" size="4"><br>
Lebar sebenarnya jendela browser: <input type="text" name="availWidth" size="4"><br>
</bentuk>
<skrip tipe="teks/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //Fungsi: Mendapatkan dimensi
{
//Dapatkan lebar jendela
jika (jendela.lebar dalam)
winWidth = jendela.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = dokumen.body.clientWidth;
//Dapatkan tinggi jendela
jika (jendela.innerHeight)
winHeight = jendela.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = dokumen.body.clientHeight;
//Deteksi isi dengan masuk jauh ke dalam Dokumen untuk mendapatkan ukuran jendela
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = dokumen.documentElement.clientHeight;
winWidth = dokumen.documentElement.clientWidth;
}
//Keluarkan hasilnya ke dua kotak teks
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
temukanDimensi();
//Panggil fungsinya dan dapatkan nilainya
window.onresize=findDimensi;
//-->
</skrip>
</tubuh>
</html>
Interpretasi program sumber
(1) Program pertama-tama membuat formulir yang berisi dua kotak teks untuk menampilkan lebar dan tinggi jendela saat ini, dan nilainya akan berubah seiring perubahan ukuran jendela.
(2) Dalam kode JavaScript berikutnya, dua variabel winWidth dan winHeight didefinisikan terlebih dahulu untuk menyimpan nilai tinggi dan lebar jendela.
(3) Kemudian, dalam fungsi findDimensions (), gunakan window.innerHeight dan window.innerWidth untuk mendapatkan tinggi dan lebar jendela, dan simpan ke dalam dua variabel yang disebutkan di atas.
(4) Kemudian deteksi isi dengan masuk jauh ke dalam Dokumen, dapatkan ukuran jendela, dan simpan dalam dua variabel yang disebutkan di atas.
(5) Di akhir fungsi, dengan mengakses elemen formulir berdasarkan nama, hasilnya ditampilkan ke dua kotak teks.
(6) Di akhir kode JavaScript, selesaikan seluruh operasi dengan memanggil fungsi findDimensions ().