Rumah hujung hadapan web tutorial js js中常用获取窗口尺寸的属性有哪些

js中常用获取窗口尺寸的属性有哪些

Sep 08, 2017 am 09:08 AM
javascript saiz harta benda

window.innerHeight(innerWidth):表示可见区域的高度(宽度),如果底部(右侧)有滚动条,会把底部(右侧)滚动条的高度(宽度)计算进去,此方法适用于标准浏览器及IE9+

document.documentElement.clientHeight(clientWidth):表示可见区域的高度(宽度),不会把滚动条的高度宽度计算进去,此方法适用于标准浏览器及低版本IE标准模式

document.documentElement.offsetHeight(offsetWidth):首先offsetWidth获得的值与clientWidth一样,而offsetHeight获得的是整个文档的高度。

注意:
个人认为上面的documentElement不代表body。当一个element有border时,element.offsetHeight包含border的值,而element.clientHeight不包含border的宽度。

document.documentElement.scrollHeight(scrollWidth):获得网页正文全文高和宽,包含边线宽度。

document.body.clientHeight(clientWidth):首先clientWidth获得的值等于document.documentElement.offsetWidth剪去body边线宽度,而clientHeight获得的是整个body的高度减去边线宽度。

document.body.offsetHeight(offsetWidth):获得的值等于document.body.clientHeight(clientWidth)加上body的边线(border)宽度,即这两个值取到到的包含边线宽度。

document.body.scrollHeight(scrollWidth):获得网页正文全文高和宽,包含边线宽度。

document.body.scrollTop(scrollLeft):浏览器窗口顶部与文档顶部之间的距离(浏览器窗口与文档左侧之间的距离),也就是滚动条滚动的距离。

window.pageYOffset(pageXOffset):浏览器窗口顶部与文档顶部之间的距离(浏览器窗口与文档左侧之间的距离),也就是滚动条滚动的距离。

window.screen.height(width):屏幕分辨率的高(宽)。

window.screen.availHeight(availWidth):屏幕可用工作区高(宽)。

下面我们来解释一下offsetTop、clientTop、scrollTop分别代表什么:

offsetTop:距离上方或上层控件的位置,整型,单位像素。

clientTop:元素的内容区距离元素边缘的距离,即元素的边线宽度。

scrollTop:元素窗口顶部与元素顶部之间的距离,即元素内部滚动条滚动的距离。

Atas ialah kandungan terperinci js中常用获取窗口尺寸的属性有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah saiz kertas a4 dalam sentimeter? Apakah saiz kertas a4 dalam sentimeter? Feb 11, 2024 pm 11:51 PM

Kertas A4 kini digunakan di banyak tempat, seperti pejabat, belajar, dan lain-lain. Kertas yang digunakan untuk menyalin pada dasarnya adalah kertas A4 Ramai rakan tidak tahu berapa sentimeter saiz kertas A4. 1. Saiz kertas A4 ialah 21cm × 29.7cm (210mm × 297mm Saiz kertas yang digunakan di kebanyakan negara di dunia menggunakan piawaian antarabangsa ini). 2. Asal kertas A4 ialah 210mm×297mm. Sebab 1: Segi empat tepat dengan panjang 2 dan lebar Nisbah yang terhasil ialah . Walau bagaimanapun, 297 dibahagikan dengan 210, hasilnya ialah 1.414, iaitu hampir dengan, dan nisbah ini betul-betul sekeping kertas

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Apakah saiz kertas a4? Apakah saiz kertas a4? Apr 25, 2024 am 11:55 AM

1. Nisbah bidang kertas A4 adalah berbeza daripada 2:3 atau 3:4 biasa. Nisbah uniknya iaitu √2:1 menjadikannya menonjol di antara banyak saiz kertas. 2. Nisbah khas ini memberikan kesan visual yang ideal dan praktikal untuk kertas A4.

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Cara mengurangkan saiz foto 'Mesti lihat untuk pemula: Langkah terperinci untuk memampatkan saiz imej' Cara mengurangkan saiz foto 'Mesti lihat untuk pemula: Langkah terperinci untuk memampatkan saiz imej' Feb 06, 2024 pm 06:55 PM

Ramai rakan menggunakan kamera untuk merakam tabiat hidup mereka Sesetengah rakan fotografi profesional mungkin juga menggunakan kamera SLR untuk mengambil gambar yang lebih jelas. Walau bagaimanapun, walaupun gambar yang diambil oleh kamera SLR adalah jelas, untuk gambar berpuluh-puluh megabait, ia sudah pasti akan meningkatkan tekanan pada peranti storan. Jadi, adakah cara untuk mengurangkan saiz foto sambil mengekalkan butiran gambar sebanyak mungkin? Malah, hanya memampatkan imej. Jadi bagaimana untuk memampatkan saiz imej? Berikut adalah dua kaedah yang baik untuk dikongsi. Kaedah 1: Kami boleh mengimport imej dalam alat kecantikan tanpa sebarang pemprosesan dan penyuntingan lain. Apabila menyimpan gambar, sistem akan menyediakan pilihan pelarasan kualiti imej, dan kami boleh menyeret peluncur untuk melaraskan ketajaman yang dikekalkan. Apabila anggaran saiz memenuhi keperluan anda, klik Simpan. Kaedah 2: ① Mula-mula buka ini ".

sintaks atribut bawah dalam CSS sintaks atribut bawah dalam CSS Feb 21, 2024 pm 03:30 PM

Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Pengenalan kepada sifat-sifat Benang Keputusasaan Hearthstone Pengenalan kepada sifat-sifat Benang Keputusasaan Hearthstone Mar 20, 2024 pm 10:36 PM

Thread of Despair ialah kad yang jarang ditemui dalam karya agung Blizzard Entertainment "Hearthstone" dan berpeluang untuk diperolehi dalam pek kad "Wizbane's Workshop". Boleh menggunakan 100/400 mata habuk misteri untuk mensintesis versi biasa/emas. Pengenalan kepada sifat-sifat Thread of Despair Hearthstone: Ia boleh diperolehi dalam pek kad bengkel Wizbane dengan peluang, atau ia juga boleh disintesis melalui habuk misteri. Jarang: Jenis Jarang: Kelas Ejaan: Death Knight Mana: 1 Kesan: Memberi semua minion Deathrattle: Menawarkan 1 kerosakan kepada semua minion

See all articles