js untuk mendapatkan maklumat pelayar asas_Pengetahuan asas

Lebar kawasan yang boleh dilihat halaman web: document.body.clientWidth
Ketinggian kawasan kelihatan halaman web: document.body.clientHeight
Lebar kawasan kelihatan halaman web: document.body.offsetWidth (termasuk lebar tepi)
Ketinggian kawasan kelihatan halaman web: document.body.offsetHeight (termasuk lebar tepi)
Lebar teks penuh isi halaman web: document.body.scrollWidth
Tinggi teks penuh isi halaman web: document.body.scrollHeight
Halaman itu ditatal begitu tinggi: document.body.scrollTop
Bahagian kiri halaman web sedang ditatal: document.body.scrollLeft
Pada badan utama halaman web: window.screenTop
Bahagian kiri badan utama halaman web: window.screenLeft
Peleraian skrin tinggi: window.screen.height
Lebar peleraian skrin: window.screen.width
Ketinggian ruang kerja yang tersedia skrin: window.screen.availHeight
Skrin tersedia lebar ruang kerja: window.screen.availWidth

Kedudukan tepat HTML: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: Mendapat ketinggian skrol objek.
scrollLeft: Menetapkan atau mendapatkan jarak antara tepi kiri objek dan hujung paling kiri kandungan yang kelihatan pada masa ini dalam tetingkap
scrollTop: Menetapkan atau mendapatkan jarak antara bahagian atas objek dan bahagian atas kandungan yang boleh dilihat dalam tetingkap
scrollWidth: Dapatkan lebar skrol objek
offsetHeight: Mendapat ketinggian objek berbanding dengan reka letak atau koordinat induk yang ditentukan oleh koordinat induk offsetParent property
offsetLeft: Mendapat kedudukan kiri objek yang dikira berbanding reka letak atau koordinat induk yang ditentukan oleh sifat offsetParent
offsetTop: Mendapat kedudukan teratas objek yang dikira berbanding dengan reka letak atau koordinat induk yang ditentukan oleh atribut offsetTop
event.clientX koordinat mendatar relatif kepada dokumen
event.clientY koordinat menegak relatif kepada dokumen
event.offsetX koordinat mendatar berbanding bekas
event.offsetY koordinat menegak relatif kepada bekas
document.documentElement.scroll Nilai atas tatal menegak
event.clientX document.documentElement.scrollTop Koordinat mendatar relatif kepada dokumen Jumlah penatalan menegak

Perbezaan antara IE dan FireFox adalah seperti berikut:

IE6.0, FF1.06:

clientWidth = padding lebar

clientHeight = pelapik ketinggian

offsetWidth = sempadan padding lebar

offsetHeight = sempadan pelapik ketinggian

IE5.0/5.5：

Lebar pelanggan = lebar - sempadan

Ketinggian pelanggan = ketinggian - sempadan

offsetWidth = lebar

offsetHeight = ketinggian

(Perlu disebut: atribut margin dalam CSS tiada kaitan dengan clientWidth, offsetWidth, clientHeight dan offsetHeight)

－－－－－－－－－－－－－－－－－

Mata Teknikal

Kod dalam bahagian ini terutamanya menggunakan beberapa sifat objek Dokumen berkenaan tetingkap Fungsi utama dan penggunaan sifat ini adalah seperti berikut.

Untuk mendapatkan saiz tetingkap, sifat dan kaedah yang berbeza perlu digunakan untuk penyemak imbas yang berbeza: untuk mengesan saiz sebenar tetingkap, anda perlu menggunakan sifat Tetingkap di bawah Netscape anda perlu pergi jauh di dalam Dokumen untuk melaksanakan Pengesanan badan; dalam persekitaran DOM, jika anda ingin mendapatkan saiz tetingkap, anda perlu memberi perhatian kepada saiz elemen akar, bukan elemen.

Sifat innerWidth objek Window mengandungi lebar dalaman tetingkap semasa. Sifat innerHeight objek Window mengandungi ketinggian dalaman tetingkap semasa.

Atribut badan objek Dokumen sepadan dengan teg dokumen HTML. Sifat documentElement objek Document mewakili nod akar dokumen HTML.

document.body.clientHeight mewakili ketinggian semasa tetingkap tempat dokumen HTML berada. document.body.clientWidth mewakili lebar semasa tetingkap tempat dokumen HTML berada.

Sedikit penyelidikan tentang mendapatkan saiz tetingkap yang boleh dilihat bagi pelbagai penyemak imbas.

Dalam ujian tempatan saya: ia boleh digunakan di bawah IE, FireFox dan Opera

document.body.clientWidth

Document.body.clientHeight boleh diperolehi, ia sangat mudah dan mudah.

Dan dalam projek syarikat: Opera masih menggunakan

document.body.clientWidth

document.body.clientHeight

Tetapi IE dan FireFox menggunakan

document.documentElement.clientWidth

document.documentElement.clientHeight

Ternyata standard W3C menyebabkan masalahhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Jika anda menambahkan baris tag ini pada halaman

Dalam IE: document.body.clientWidth ==> lebar objek BODY

document.body.clientHeight ==> ketinggian objek BADAN

document.documentElement.clientWidth ==>

document.documentElement.clientHeight ==> Ketinggian kawasan yang boleh dilihat

Dalam FireFox: document.body.clientWidth ==> lebar objek BODY

document.body.clientHeight ==> ketinggian objek BADAN

document.documentElement.clientWidth ==>

document.documentElement.clientHeight ==> Ketinggian kawasan yang boleh dilihat?

Dalam Opera: document.body.clientWidth ==> Kelihatan lebar kawasan

document.body.clientHeight ==> Ketinggian kawasan yang boleh dilihat

document.documentElement.clientWidth ==> Lebar objek halaman (iaitu, lebar objek BODY ditambah lebar Margin) document.documentElement.clientHeight ==>gt; Tinggi objek halaman (iaitu, ketinggian objek BODY ditambah ketinggian Margin)

Dan jika tiada piawaian W3C yang ditentukan,

Kemudian IE ialah: document.documentElement.clientWidth ==>

document.documentElement.clientHeight ==> 0

FireFox ialah: document.documentElement.clientWidth ==> lebar objek halaman (iaitu, lebar objek BODY ditambah lebar Margin)

document.documentElement.clientHeight ==> Ketinggian objek halaman (iaitu ketinggian objek BADAN ditambah ketinggian Margin)

Opera ialah: document.documentElement.clientWidth ==> lebar objek halaman (iaitu, lebar objek BODY ditambah lebar Margin)

document.documentElement.clientHeight ==> Ketinggian objek halaman (iaitu ketinggian objek BADAN ditambah ketinggian Margin)

Ia benar-benar satu perkara yang menyusahkan Malah, dari perspektif reka bentuk dan pembangunan bahagian hadapan, adalah lebih mudah untuk mempunyai lebih sedikit objek dan kaedah dan tidak menggunakan piawaian terkini. Tetapi jika anda tidak dapat mengikuti trend, anda tidak akan menjadi seorang pereka senior, jadi kami masih perlu memahami dan menguasai ilmu ini.