Za stvaranje dinamičkih i pikselno savršenih dizajna web stranica, mjerenje veličine prozora vrlo je važno razumjeti i koristiti. Željeni izgled web stranice možda se neće generirati ako se mjerenje prozora ne izvrši ili ne koristi ispravno. Nažalost, HTML/CSS nije pružio nikakav atribut ili svojstvo za dobivanje točnih podataka o veličini zaslona prozora i udaljenosti prozora od izvornih granica zaslona.
Srećom! JavaScript rješava ovaj problem dajući svoj ' window.screenLeft” i “window.screenTop ” za mjerenje položaja prozora na oba x” i “y-os ” odnosno. Naš glavni fokus u ovom članku je dobiti položaj duž X-osi uz pomoć ' prozor.zaslonLijevo ” vlasništvo. Dakle, počnimo!
Ovaj će blog objasniti postupak korištenja ili pristupa svojstvu window.screenLeft u JavaScriptu.
Kako pristupiti svojstvu “window.screenLeft” u JavaScriptu?
' prozor.zaslonLijevo ” Svojstvo JavaScripta vraća informacije koje se odnose na horizontalni položaj prozora, u odnosu na ekran. Ovo svojstvo vraća numeričku vrijednost u pikselskom formatu, pokazujući horizontalnu udaljenost prozora od ekrana. Posjetite donji kod u kojem je ' prozor.zaslonLijevo ” koristi se nekretnina:
< tijelo >
< h1 stil = 'boja: morskozelena;' > Linux < / h1 >
< str iskaznica = 'cilj' > < / str >
< skripta >
neka i = window.screenLeft;
document.getElementById('target').innerHTML = 'Lijevo: ' + i;
< / skripta >
< / tijelo >
Opis gornjeg koda:
- Prvo, HTML ' str ” element je kreiran s ID-om „ cilj ”.
- Zatim, ' prozor.zaslonLijevo ” svojstvo se koristi unutar “< skripta >” i pohranjuje rezultat u varijablu “ ja ”.
- Zatim odaberite element s ID-om ' cilj ’ i umetnite vrijednost “ i' varijabla pomoću ' unutarnjiHTML ” vlasništvo.
Pregled web stranice je sljedeći:
Izlaz pokazuje da je vodoravna udaljenost od lijeve granice zaslona nula piksela.
Primjer: dinamičko dohvaćanje vodoravne vrijednosti
Svojstvo screenLeft može se koristiti zajedno s ' promijeniti veličinu ” slušatelj događaja za pružanje položaja prozora u stvarnom vremenu koji odgovara ekranu duž x-osi. Na isti način, položaj duž y-osi ili okomite osi također se može dohvatiti korištenjem ' prozor.screenTop ” vlasništvo. Hajdemo imati kôd za navedeni scenarij:
< tijelo >< h1 stil = 'boja: morskozelena;' > Linuxhint < / h1 >
< str iskaznica = 'test' >< / str >
< skripta >
dinamika funkcije ( ) {
neka ja = window.screenLeft;
neka j = window.screenTop;
document.getElementById ( 'test' ) .unutarnjiHTML = 'Pozicija iz lijevog smjera: ' + ja + ', Iz gornjeg smjera: ' + j;
}
window.addEventListener ( 'promijeni veličinu' , dinamičan ) ;
< / skripta >
Objašnjenje gornjeg koda je sljedeće:
- Prvo, kreiran je ciljani element s ID-om ' test ”.
- Zatim, '< skripta >” koristi se oznaka, a “ dinamičan ()” u njemu se stvara funkcija.
- Unutar funkcije upotrijebite ' window.screenLeft” i “window.screenTop ' svojstva i pohranite ih u ' i” i “j ” varijabli.
- Nakon toga odaberite ciljani element tako da dobijete njegov ID ' test ' i uz pomoć ' unutarnjiHTML ” svojstvo prikazuje vrijednosti za oba “ i” i “j ” varijable preko web stranice.
- Na kraju priložite ' promijeniti veličinu ' slušatelj događaja s ' prozor ' koji poziva ' dinamičan ()” svaki put kad se promijeni veličina prozora.
Pregled web stranice nakon završetka kompilacije:
U gornjem izlazu, razlika prozora s gornje i lijeve strane primljena je u pikselima kako se prozoru mijenja veličina.
To je sve o ' prozor.screeLeft ” svojstvo u JavaScriptu.
Zaključak
Za pristup ' prozor.zaslonLijevo ' u JavaScriptu i priložite ' promijeniti veličinu ” slušatelj događaja za “ prozor ”. Ovo poziva funkciju povratnog poziva svaki put kada se veličina prozora promijeni. Unutar ove funkcije stvorite varijablu koja pohranjuje ' prozor.zaslonLijevo ” vlasništvo. Štoviše, dohvatite referencu ciljanog elementa i preko nje prikažite vrijednosti ove varijable. Ovaj je blog objasnio postupak pristupa svojstvu window.screenLeft u JavaScriptu.