Untuk mencipta reka bentuk halaman web yang dinamik dan sempurna piksel, ukuran saiz tetingkap adalah sangat penting untuk difahami dan digunakan. Reka letak halaman web yang diingini mungkin tidak akan dihasilkan jika ukuran tetingkap tidak diambil atau digunakan dengan betul. Malangnya, HTML/CSS tidak menyediakan sebarang atribut atau sifat untuk mendapatkan pengetahuan yang tepat tentang saiz skrin Tetingkap dan jarak tetingkap daripada sempadan skrin asal.
Nasib baik! JavaScript menyelesaikan isu ini dengan menyediakan ' window.screenLeft” dan “window.screenTop ' sifat untuk mengukur kedudukan tetingkap pada kedua-dua ' x” dan “paksi-y ” masing-masing. Fokus utama kami dalam artikel ini adalah untuk mendapatkan kedudukan di sepanjang paksi X dengan bantuan ' window.screenLeft ” harta benda. Jadi, mari kita mulakan!
Blog ini akan menerangkan prosedur untuk menggunakan atau mengakses harta window.screenLeft dalam JavaScript.
Bagaimana untuk Mengakses Harta 'window.screenLeft' dalam JavaScript?
' window.screenLeft ” harta JavaScript mengembalikan maklumat yang berkaitan dengan kedudukan mendatar tetingkap, berbanding dengan skrin. Sifat ini mengembalikan nilai angka dalam format piksel, menunjukkan jarak mendatar tetingkap dari skrin. Lawati kod di bawah, di mana ' window.screenLeft ” harta sedang digunakan:
< badan >
< h1 gaya = 'warna: hijau laut;' > Linux < / h1 >
< hlm ID = 'sasaran' > < / hlm >
< skrip >
biarkan i = window.screenLeft;
document.getElementById('target').innerHTML = 'Kiri: ' + i;
< / skrip >
< / badan >
Penerangan kod di atas:
- Pertama, HTML ' hlm elemen ' dicipta dengan id ' sasaran ”.
- Seterusnya, ' window.screenLeft harta ” digunakan di dalam “< skrip >” tag dan menyimpan hasilnya dalam pembolehubah “ i ”.
- Kemudian, pilih elemen dengan id ' sasaran ’ dan masukkan nilai bagi “ i” pembolehubah menggunakan “ innerHTML ” harta benda.
Pratonton halaman web adalah seperti berikut:
Output menunjukkan jarak mendatar dari sempadan skrin kiri ialah sifar piksel.
Contoh: Mendapatkan Nilai Mendatar Secara Dinamik
Sifat screenLeft boleh digunakan bersama dengan ' ubah saiz ” pendengar acara untuk menyediakan kedudukan masa nyata tetingkap yang sepadan dengan skrin di sepanjang paksi-x. Dengan cara yang sama, kedudukan di sepanjang paksi-y atau paksi menegak juga boleh diambil dengan menggunakan ' window.screenTop ” harta benda. Mari kita mempunyai kod untuk senario yang diberikan:
< badan >< h1 gaya = 'warna: hijau laut;' > Linuxhint < / h1 >
< hlm ID = 'ujian' >< / hlm >
< skrip >
fungsi dinamik ( ) {
biar saya = window.screenLeft;
biarkan j = window.screenTop;
document.getElementById ( 'ujian' ) .innerHTML = 'Kedudukan dari Arah Kiri: ' + i + ', Dari Arah Atas: ' + j;
}
window.addEventListener ( 'ubah saiz' , dinamik ) ;
< / skrip >
Penjelasan kod di atas adalah seperti berikut:
- Pertama, elemen yang disasarkan telah dibuat mempunyai id ' ujian ”.
- Seterusnya, “< skrip >” tag digunakan, dan “ dinamik ()” fungsi dicipta di dalamnya.
- Di dalam fungsi, gunakan ' window.screenLeft” dan “window.screenTop ” hartanah dan simpannya dalam “ i” dan “j ” pembolehubah masing-masing.
- Selepas itu, pilih elemen yang disasarkan dengan mendapatkan idnya ' ujian ” dan dengan bantuan daripada “ innerHTML harta ” memaparkan nilai untuk kedua-duanya “ i” dan “j ” pembolehubah di atas halaman web.
- Pada akhirnya, lampirkan ' ubah saiz ” pendengar acara dengan “ tingkap 'yang menyeru' dinamik ()” berfungsi setiap kali apabila saiz tetingkap ditukar.
Pratonton halaman web selepas tamat penyusunan:
Dalam output di atas, perbezaan tetingkap dari bahagian atas dan kiri diterima dalam piksel apabila tetingkap diubah saiznya.
Itu semua tentang ' window.screeLeft ” harta dalam JavaScript.
Kesimpulan
Untuk mengakses ' window.screenLeft ” harta dalam JavaScript dan lampirkan “ ubah saiz ” pendengar acara kepada “ tingkap ”. Ini menggunakan fungsi panggil balik setiap kali saiz tetingkap diubah saiz. Di dalam fungsi ini, buat pembolehubah yang menyimpan ' window.screenLeft ” harta benda. Selain itu, dapatkan semula rujukan elemen yang disasarkan dan paparkan nilai pembolehubah ini di atasnya. Blog ini telah menerangkan proses untuk mengakses sifat window.screenLeft dalam JavaScript.