Jadual Kandungan
璇疯
Rumah hujung hadapan web tutorial js javascript窗口宽高,鼠标位置,滚动高度(详细解析)_基础知识

javascript窗口宽高,鼠标位置,滚动高度(详细解析)_基础知识

May 16, 2016 pm 05:14 PM
javascript tetikus

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

-------------------

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:

若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;

在IE下需要深入Document内部对body进行检测;

在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。

Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。

Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。

document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码:

复制代码 代码如下:




 请调整浏览器窗口
 


 

璇疯

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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

Bagaimana untuk melumpuhkan pratonton lakaran kecil bar tugas dalam Win11 Matikan teknik lakaran kecil paparan ikon bar tugas dengan menggerakkan tetikus Bagaimana untuk melumpuhkan pratonton lakaran kecil bar tugas dalam Win11 Matikan teknik lakaran kecil paparan ikon bar tugas dengan menggerakkan tetikus Feb 29, 2024 pm 03:20 PM

Artikel ini akan memperkenalkan cara untuk mematikan fungsi lakaran kenit yang dipaparkan apabila tetikus menggerakkan ikon bar tugas dalam sistem Win11. Ciri ini dihidupkan secara lalai dan memaparkan lakaran kecil tetingkap semasa aplikasi apabila pengguna menuding tetikus pada ikon aplikasi pada bar tugas. Walau bagaimanapun, sesetengah pengguna mungkin mendapati ciri ini kurang berguna atau mengganggu pengalaman mereka dan ingin mematikannya. Lakaran kecil bar tugas boleh menjadi menyeronokkan, tetapi ia juga boleh mengganggu atau menjengkelkan. Memandangkan kekerapan anda menuding di atas kawasan ini, anda mungkin telah menutup tetingkap penting secara tidak sengaja beberapa kali. Kelemahan lain ialah ia menggunakan lebih banyak sumber sistem, jadi jika anda telah mencari cara untuk menjadi lebih cekap sumber, kami akan menunjukkan kepada anda cara untuk melumpuhkannya. tetapi

Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan Jul 19, 2024 am 04:17 AM

Menurut berita dari laman web ini pada 12 Julai, Razer hari ini mengumumkan pelancaran pad tetikus dan tetikus tanpa wayar Razer|Pokémon Gengar. Harga produk tunggal ialah 1,299 yuan dan 299 yuan, dan harga pakej termasuk kedua-dua produk ialah 1,549 yuan. Ini bukan kali pertama Razer melancarkan produk persisian jenama bersama Gengar pada 2023, Razer melancarkan tetikus permainan Yamata Orochi V2 gaya Gengar. Kedua-dua produk baharu yang dilancarkan kali ini semuanya menggunakan latar belakang ungu gelap yang serupa dengan penampilan keluarga Ghost, Ghost, dan Gengar Mereka dicetak dengan garis besar tiga Pokémon dan Poké Balls ini, dengan watak Gengar di tengah imej besar dan berwarna-warni Pokémon jenis hantu klasik. Laman web ini mendapati bahawa tetikus tanpa wayar Razer|Pokémon Gengar adalah berdasarkan Viper V3 Edisi Profesional yang dikeluarkan sebelum ini. Berat keseluruhannya ialah 55g dan dilengkapi dengan FOC generasi kedua Razer

HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan Apr 01, 2024 am 09:11 AM

Menurut berita dari laman web ini pada 31 Mac, HP baru-baru ini melancarkan tetikus Bluetooth tiga mod Professor1 di JD.com, tersedia dalam warna teh susu hitam dan putih. Harga awal ialah 99 yuan, dan deposit sebanyak 10 yuan diperlukan. Menurut laporan, tetikus ini mempunyai berat 106 gram, menggunakan reka bentuk ergonomik, berukuran 127.02x79.59x51.15mm, mempunyai tujuh tahap 4000DPI pilihan, dilengkapi dengan sensor Blue Shadow RAW3220, dan menggunakan bateri 650 mAh dikatakan boleh digunakan dengan sekali caj 2 bulan. Maklumat parameter tetikus yang dilampirkan pada tapak ini adalah seperti berikut:

Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Aug 12, 2024 pm 10:45 PM

Menurut berita dari laman web ini pada 12 Ogos, VGN melancarkan siri papan kekunci dan tetikus "Elden Ring" berjenama bersama pada 6 Ogos, termasuk papan kekunci, tetikus dan pad tetikus, yang direka dengan tema tersuai bagi siri Lani/Faded One produk Ia telah diletakkan di JD.com, berharga dari 99 yuan. Maklumat produk baharu jenama bersama yang dilampirkan pada tapak ini adalah seperti berikut: Papan Kekunci VGN丨Elden Law Ring S99PRO Papan kekunci ini menggunakan cangkerang aloi aluminium tulen, ditambah dengan struktur penyenyap lima lapisan, menggunakan struktur spring daun GASKET, mempunyai satu PCB berslot kunci, dan bahan PBT tinggi asal, satah belakang diperibadikan aloi aluminium menyokong sambungan tiga mod dan teknologi kependaman rendah SMARTSPEEDX, ia boleh menguruskan berbilang peranti dalam satu hentian, bermula pada 549 yuan; VGN丨Elden French Ring F1PROMAX tetikus wayarles tetikus

Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus Feb 20, 2024 am 09:54 AM

Artikel ini meneroka isu yang boleh timbul apabila tetikus tidak dapat memilih atau menyerlahkan teks dalam Microsoft Word dan cara menyelesaikannya. Mengapa saya tidak boleh memilih teks dalam Microsoft Word? Ketidakupayaan untuk memilih teks dalam MSWord mungkin dipengaruhi oleh pelbagai sebab, seperti sekatan kebenaran, perlindungan dokumen, isu pemacu tetikus atau kerosakan fail. Penyelesaian kepada masalah ini disediakan di bawah. Betulkan Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus Jika Microsoft Word tidak boleh memilih atau menyerlahkan teks menggunakan tetikus, ikut penyelesaian yang dinyatakan di bawah: Pastikan butang kiri tetikus anda berfungsi Semak jika anda layak menukar fail Kemas kini pemacu tetikus anda

Dalam folder manakah terletaknya pemandu tetikus Razer? Dalam folder manakah terletaknya pemandu tetikus Razer? Mar 02, 2024 pm 01:28 PM

Ramai pengguna tidak tahu ke mana perginya fail yang dipasang oleh pemacu Razer mereka Fail pemacu ini biasanya dipasang pada cakera sistem, iaitu pemacu C komputer Lokasi tertentu berada dalam folder RAZE di bawah fail program. Dalam folder manakah terletaknya pemandu tetikus Razer A: Dalam folder RAZE di bawah fail program pada pemacu sistem C. Secara amnya, pemandu akan dipasang pada pemacu C, cari sahaja mengikut lokasi. Pengenalan kepada kaedah pemasangan pemacu tetikus Razer 1. Selepas memuat turun fail dari tapak web rasmi, klik dua kali untuk menjalankan fail EXE yang dimuat turun. 2. Tunggu sehingga perisian dimuatkan. 3. Di sini anda boleh memilih pemacu yang anda ingin pasang. 4. Selepas memilih, klik "Pasang" di sudut kanan bawah.

Apakah maksud cpi tetikus? Apakah maksud cpi tetikus? Feb 12, 2024 pm 09:40 PM

CPI juga dipanggil countperinch. CPI dalam tetikus ialah sensitiviti tetikus Apabila menggunakannya, semakin tinggi nombor CPI, semakin sensitif tetikus. Sekarang dalam artikel ini, editor membawakan anda pengenalan kepada fungsi butang CPI tetikus. Apakah maksud cpi? Apakah yang dimaksudkan dengan paksi x dan y? mata yang disuap balik setiap inci semasa pergerakan dinamik adalah sensitiviti tetikus. Pengenalan fungsi butang: 1. Laraskan butang kelajuan pergerakan tetikus;

Mengapa tetikus saya tidak dikenali oleh pemacu Logitech? Mengapa tetikus saya tidak dikenali oleh pemacu Logitech? Jan 16, 2024 pm 02:45 PM

Jika pemandu Logitech menghadapi masalah yang menyebabkan tetikus tidak dapat dikenali atau tidak dapat dikesan semasa menggunakannya, ia mungkin disebabkan oleh tetikus atau kegagalan antara muka, atau versi pemacu yang salah dipasang. Sila semak sambungan antara tetikus dan antara muka dan cuba kemas kini versi pemacu yang betul. Mengapa pemandu Logitech tidak dapat mengecam tetikus saya: 1. Mungkin masalah dengan tetikus atau antara muka 1. Untuk menentukan sama ada tetikus pengguna adalah tetikus Logitech tulen, jika anda tidak pasti, anda boleh merujuk pelanggan selepas jualan Logitech perkhidmatan. 2. Pengguna boleh menyemak sama ada antara muka USB dan kabel sambungan tetikus komputer adalah normal, jika tidak, ia juga akan menjejaskan pengecaman pemacu Logitech. 2. Versi pemacu mungkin tidak betul 1. Versi terkini pemacu Logitech tidak dapat mengecam peranti lama, jadi tetikus yang menggunakan versi lama tidak dapat dikenali. 2. Begitu juga, versi baru tetikus tidak boleh digunakan oleh yang lama.

See all articles