Untuk membuat desain halaman web yang dinamis dan sempurna piksel, pengukuran ukuran jendela sangat penting untuk dipahami dan digunakan. Tata letak halaman web yang diinginkan mungkin tidak dihasilkan jika pengukuran jendela tidak dilakukan atau digunakan dengan benar. Sayangnya, HTML/CSS tidak menyediakan atribut atau properti apa pun untuk mendapatkan pengetahuan akurat tentang ukuran layar Jendela dan jarak jendela dari batas layar aslinya.
Untunglah! JavaScript menyelesaikan masalah ini dengan menyediakan “ window.screenLeft” dan “window.screenTop ” properti untuk mengukur posisi jendela di kedua “ x” dan “sumbu y ” masing-masing. Fokus utama kami dalam artikel ini adalah mendapatkan posisi sepanjang sumbu X dengan bantuan “ jendela.layarKiri ' Properti. Jadi ayo mulai!
Blog ini akan menjelaskan tata cara menggunakan atau mengakses properti window.screenLeft di JavaScript.
Bagaimana Cara Mengakses Properti “window.screenLeft” di JavaScript?
“ jendela.layarKiri ” Properti JavaScript mengembalikan informasi terkait posisi horizontal jendela, relatif terhadap layar. Properti ini mengembalikan nilai numerik dalam format piksel, menunjukkan jarak horizontal jendela dari layar. Kunjungi kode di bawah ini, di mana “ jendela.layarKiri ” properti sedang digunakan:
< tubuh >
< h1 gaya = 'warna: hijau laut;' > Linux < / h1 >
< P pengenal = 'target' > < / P >
< naskah >
biarkan i = jendela.layarKiri;
document.getElementById('target').innerHTML = 'Kiri: ' + i;
< / naskah >
< / tubuh >
Deskripsi kode di atas:
- Pertama, HTMLnya “ P ” elemen dibuat dengan id “ target ”.
- Selanjutnya, “ jendela.layarKiri ” Properti digunakan di dalam “< naskah >” memberi tag dan menyimpan hasilnya dalam variabel “ Saya ”.
- Kemudian, pilih elemen dengan id “ target ' dan masukkan nilai “ i” variabel menggunakan “ innerHTML ' Properti.
Pratinjau halaman web adalah sebagai berikut:
Outputnya menunjukkan jarak horizontal dari batas kiri layar adalah nol piksel.
Contoh: Mengambil Nilai Horizontal Secara Dinamis
Properti screenLeft dapat digunakan bersama dengan “ mengubah ukuran ” pendengar acara untuk memberikan posisi jendela real-time yang sesuai dengan layar sepanjang sumbu x. Dengan cara yang sama, posisi sepanjang sumbu y atau sumbu vertikal juga dapat diambil dengan memanfaatkan “ jendela.layarTop ' Properti. Mari kita buat kode untuk skenario yang diberikan:
< tubuh >< h1 gaya = 'warna: hijau laut;' > Petunjuk Linux < / h1 >
< P pengenal = 'tes' < / P >
< naskah >
fungsi dinamis ( ) {
biarkan aku = window.screenLeft;
biarkan j = window.screenTop;
dokumen.getElementById ( 'tes' ) .innerHTML = 'Posisi dari Arah Kiri:' + saya + ', Dari Arah Atas:' +j;
}
jendela.addEventListener ( 'mengubah ukuran' , dinamis ) ;
< / naskah >
Penjelasan kode di atas adalah sebagai berikut:
- Pertama, elemen yang ditargetkan telah dibuat dengan id “ tes ”.
- Selanjutnya, “< naskah >” tag digunakan, dan “ dinamis ()” fungsi dibuat di dalamnya.
- Di dalam fungsinya, gunakan “ window.screenLeft” dan “window.screenTop ” properti dan menyimpannya di “ saya” dan “j ” masing-masing variabel.
- Setelah itu, pilih elemen yang ditargetkan dengan mendapatkan idnya “ tes ” dan dengan bantuan “ innerHTML ” properti menampilkan nilai untuk keduanya “ saya” dan “j ” variabel di halaman web.
- Pada akhirnya, lampirkan “ mengubah ukuran ” pendengar acara dengan “ jendela ” yang memanggil “ dinamis ()” berfungsi setiap kali ukuran jendela diubah.
Pratinjau halaman web setelah kompilasi berakhir:
Pada output di atas, perbedaan jendela dari sisi atas dan kiri diterima dalam piksel saat ukuran jendela diubah.
Itu semua tentang “ jendela.screeLeft ” properti dalam JavaScript.
Kesimpulan
Untuk mengakses “ jendela.layarKiri ” properti di JavaScript dan lampirkan “ mengubah ukuran ” pendengar acara ke “ jendela ”. Ini memanggil fungsi panggilan balik setiap kali ukuran jendela diubah ukurannya. Di dalam fungsi ini, buat variabel yang menyimpan “ jendela.layarKiri ' Properti. Selain itu, ambil referensi elemen yang ditargetkan dan tampilkan nilai variabel ini di atasnya. Blog ini telah menjelaskan proses mengakses properti window.screenLeft di JavaScript.