Pentru a crea designuri de pagini web dinamice și perfecte pentru pixeli, măsurătorile dimensiunii ferestrei sunt foarte critice de înțeles și utilizat. Este posibil ca aspectul dorit al paginii web să nu fie generat dacă măsurarea ferestrei nu este luată sau utilizată corect. Din păcate, HTML/CSS nu a furnizat niciun atribut sau proprietate pentru a obține cunoștințe exacte despre dimensiunea ecranului ferestrei și distanța ferestrei față de limitele ecranului inițial.
Din fericire! JavaScript rezolvă această problemă furnizând „ window.screenLeft” și „window.screenTop ” pentru a măsura poziția ferestrei atât pe „ x” și „axa y ” respectiv. Obiectivul nostru principal în acest articol este să obținem o poziție de-a lungul axei X cu ajutorul „ fereastra.ecranStânga ” proprietate. Asadar, hai sa incepem!
Acest blog va explica procedura de utilizare sau accesare a proprietății window.screenLeft în JavaScript.
Cum se accesează proprietatea „window.screenLeft” în JavaScript?
„ fereastra.ecranStânga ” proprietatea JavaScript returnează informațiile legate de poziția orizontală a unei ferestre, în raport cu ecranul. Această proprietate returnează valoarea numerică în format pixel, arătând distanța orizontală a ferestrei față de ecran. Vizitați codul de mai jos, în care „ fereastra.ecranStânga ” proprietatea este utilizată:
< corp >
< h1 stil = 'culoare: verde mare;' > Linux < / h1 >
< p id = 'ţintă' > < / p >
< scenariu >
let i = window.screenLeft;
document.getElementById('țintă').innerHTML = 'Stânga: ' + i;
< / scenariu >
< / corp >
Descrierea codului de mai sus:
- În primul rând, codul HTML „ p elementul ” este creat cu un id de „ ţintă ”.
- În continuare, „ fereastra.ecranStânga ” este utilizată în interiorul „< scenariu >” etichetă și stochează rezultatul în variabila „ i ”.
- Apoi, selectați elementul cu id-ul „ ţintă ’ și introduceți valoarea lui „ i” folosind variabila „ innerHTML ” proprietate.
Previzualizarea paginii web este următoarea:
Ieșirea arată că distanța orizontală de la limita din stânga a ecranului este zero pixeli.
Exemplu: Recuperarea dinamică a valorii orizontale
Proprietatea screenLeft poate fi folosită împreună cu „ redimensiona ” ascultător de evenimente pentru a furniza poziția în timp real a ferestrei corespunzătoare ecranului de-a lungul axei x. În același mod, poziția de-a lungul axei y sau a axei verticale poate fi, de asemenea, recuperată utilizând „ fereastra.ecranSus ” proprietate. Să avem un cod pentru scenariul dat:
< corp >< h1 stil = 'culoare: verde mare;' > Linuxhint < / h1 >
< p id = 'Test' >< / p >
< scenariu >
funcţia dinamică ( ) {
lasă-mă = window.screenLeft;
fie j = window.screenTop;
document.getElementById ( 'Test' ) .innerHTML = „Poziția din direcția din stânga:” + i + ', Din direcția de sus: ' + j;
}
window.addEventListener ( „redimensionează” , dinamic ) ;
< / scenariu >
Explicația codului de mai sus este următoarea:
- În primul rând, elementul vizat a fost creat având un id de „ Test ”.
- În continuare, „< scenariu >” este folosită eticheta și „ dinamic ()” este creată în ea.
- În interiorul funcției, utilizați „ window.screenLeft” și „window.screenTop ” proprietăți și stocați-le în „ i” și „j ” variabile respectiv.
- După aceea, selectați elementul vizat obținându-i id-ul „ Test ” și cu ajutorul ” innerHTML ” proprietatea afișează valorile pentru ambele ” i” și „j ” variabile pe pagina web.
- La final, atașați „ redimensiona ” ascultător de evenimente cu „ fereastră ' care invocă ' dinamic ()” de fiecare dată când dimensiunea ferestrei este schimbată.
Previzualizare a paginii web după încheierea compilării:
În rezultatul de mai sus, diferența ferestrei față de părțile de sus și stânga este primită în pixeli pe măsură ce fereastra este redimensionată.
Asta este totul despre „ fereastra.screeLeft ” proprietate în JavaScript.
Concluzie
Pentru a accesa „ fereastra.ecranStânga ” în JavaScript și atașați „ redimensiona „ascultător de evenimente” fereastră ”. Aceasta invocă funcția de apel invers de fiecare dată când dimensiunea ferestrei este redimensionată. În cadrul acestei funcții, creați o variabilă care stochează „ fereastra.ecranStânga ” proprietate. Mai mult, preluați referința elementului vizat și afișați valorile acestei variabile peste el. Acest blog a explicat procesul de accesare a proprietății window.screenLeft în JavaScript.