objek layar
Dapatkan tinggi dan lebar layar (resolusi)
screen.width // layar lebar.
objek jendela
Dapatkan posisi dan ukuran jendela
window.screentop // Jarak dari atas jendela ke bagian atas jendela layar.screenleft // Jarak dari sisi kiri jendela ke sisi kiri jendela layar.innerwidth // Lebar sudut pandang di jendela peringatan (window.innerwidth); // Chrome 1366 ff 1366 IE 1366 window.innerheight // ketinggian sudut pandang di jendela nilai ini terkait dengan faktor -faktor seperti apakah browser menampilkan bilah menu, dll. Peringatan (window.innerheight); // chrome 643 ff 657 yaitu 673Window.outerwidth // Lebar jendela browser itu sendiri (lebar area yang terlihat + lebar perbatasan browser) Peringatan (window.outerwidth); // Chrome 1366 ff 1382 yaitu 1382 // menunjukkan bahwa ketika chrome dimaksimalkan, jendela browser tidak memiliki lebar perbatasan, dan ketika tidak dimaksimalkan, ada lebar perbatasan 8px // ff dan yaitu jendela ke atas, ke bawah dan kanan. // Chrome 728 ff 744 IE 744
objek elemen
Sebelum memperkenalkan berbagai ketinggian dan lebar objek elemen, perlu untuk menjelaskan model kotak.
box-sizing:content-box;
boxwidth = 2*margin + 2*perbatasan + 2*padding + widthboxheight = 2*margin + 2*perbatasan + 2*padding + tinggi
Saat tidak ada scrollbar muncul
tubuh {margin: 0;}#demo {lebar: 100px; Tinggi: 100px; padding: 10px; Perbatasan: 20px; margin: 30px; Latar Belakang-Color: Red;} <Div ID = "Demo"> 123456789 123456789 </Div>ClientWidth: Mengembalikan lebar konten yang terlihat pada halaman (tidak termasuk perbatasan, margin, atau scrollbars)
ClientHeight: Mengembalikan ketinggian yang terlihat dari konten pada halaman (tidak termasuk perbatasan, margin, atau scrollbars)
clientWidth = 2*padding + lebar - scrollbarwidth console.log (document.geteLementById ('demo'). clientwidth); // 120 Saat ini scrollbarwidth = 0clientHeight = 2*padding + tinggi - scrollbarheight console.log (document.geteLementById ('demo'). Clientheight); // 120 saat ini scrollbarwidth = 0Offsetwidth: Mengembalikan lebar elemen termasuk perbatasan dan pengisian, tetapi tidak termasuk margin
OffsetHeight: Mengembalikan ketinggian elemen termasuk perbatasan dan pengisian, tetapi tidak termasuk margin
OffsetWidth = 2*Border + 2*Padding + Width Console.log (document.geteLementById ('demo'). OffsetWidth) // 160offsetHeight = 2*Border + 2*Padding + Height Console.log (Document.getElementById ('demo'). Offsetheight) / /160Offsetleft: Mendapat posisi kiri yang dihitung dari objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsetleft.
Offsettop: Mendapat posisi teratas yang dihitung dari objek relatif terhadap tata letak atau koordinat induk yang ditentukan oleh properti offsettop
console.log (document.geteLementById ('demo'). offsetleft) //30console.log(document.getElementById('demo').offsettop) // 30Saat scrollbar muncul
tubuh {margin: 0; padding: 20px; Lebar: 1000px; Tinggi: 500px;} <Div id = "Demo"> 123456789123456789 </div>Scrollwidth: Mengembalikan seluruh lebar elemen (termasuk tempat tersembunyi dengan batang gulir)
ScrollHeight: Mengembalikan ketinggian seluruh elemen (termasuk tempat tersembunyi dengan batang gulir)
scrollwidth = 2*padding + width console.log (document.body.scrollwidth) // 1040scrollheight = 2*padding + width console.log (document.body.scrollheight) // 540
Scrolltop: Ketinggian elemen konten tersembunyi saat meluncur ke bawah blok gulir. Saat tidak diatur, defaultnya adalah 0, dan nilainya berubah saat blok gulir menggulir
Scrollleft: Lebar elemen konten tersembunyi saat menggeser blok gulir ke kanan. Saat tidak diatur, defaultnya adalah 0, dan nilainya berubah saat blok gulir menggulir
objek acara
Objek peristiwa mewakili status suatu peristiwa, seperti elemen di mana peristiwa terjadi, status kunci keyboard, posisi mouse, dan status tombol mouse.
event.pagex: relatif terhadap koordinat seluruh halaman, sudut kiri atas halaman adalah jarak horizontal dari asal koordinat ke titik di mana mouse berada (IE8 tidak mendukungnya)
event.pagey: relatif terhadap koordinat seluruh halaman, sudut kiri atas halaman adalah jarak vertikal dari asal koordinat ke titik di mana mouse berada (IE8 tidak mendukungnya)
event.clientX: The coordinates of the relative visual area, using the upper left corner of the browser visual area as the horizontal distance from the origin of the coordinates to the point where the mouse is located, using the upper left corner of the browser visual area as the horizontal distance from the origin of the coordinates to the point where the mouse is located
event.clienty: Koordinat area visual relatif, menggunakan sudut kiri atas area visual browser sebagai jarak vertikal dari asal koordinat ke titik di mana mouse berada, menggunakan sudut kiri atas area visual browser sebagai jarak vertikal dari titik asal koordinat ke titik di mana mouse berada.
event.screenx: relatif terhadap koordinat layar komputer, jarak horizontal dari asal koordinat ke titik di mana mouse berada, menggunakan sudut kiri atas layar sebagai jarak horizontal dari titik asal koordinat ke titik di mana mouse berada
event.screeny: relatif terhadap koordinat layar komputer, jarak vertikal dari asal koordinat ke titik di mana mouse berada, menggunakan sudut kiri atas layar sebagai jarak vertikal dari titik asal koordinat ke titik di mana mouse berada
event.Offsetx: relatif terhadap koordinatnya sendiri, jarak horizontal dari asal koordinat sudut kiri atas bantalannya sendiri ke titik di mana mouse berada didasarkan pada jarak horizontal dari asal koordinat koordinat ke titik di mana mouse berada
Event.Offsety: Relatif terhadap koordinatnya sendiri, jarak horizontal dari asal koordinat sudut kiri atas bantalannya sendiri ke titik di mana mouse berada didasarkan pada jarak horizontal dari asal koordinat.
Meringkaskan
Di atas adalah ringkasan metode untuk mendapatkan berbagai ketinggian dan posisi halaman web di JS, yang memberikan kenyamanan bagi semua orang saat belajar JS. Teman yang membutuhkan dapat merujuknya.