Na vytvorenie dynamických a pixelovo dokonalých návrhov webových stránok je veľmi dôležité pochopiť a použiť merania veľkosti okna. Požadované rozloženie webovej stránky sa nemusí vygenerovať, ak sa meranie okna neuskutoční alebo sa nepoužije správne. Žiaľ, HTML/CSS neposkytol žiadny atribút alebo vlastnosť na získanie presných informácií o veľkosti obrazovky okna a vzdialenosti okna od pôvodných hraníc obrazovky.
Našťastie! JavaScript rieši tento problém poskytnutím svojho „ window.screenLeft“ a „window.screenTop vlastnosti na meranie polohy okna na oboch x“ a „os y“. “. Naším hlavným cieľom v tomto článku je získať polohu pozdĺž osi X pomocou „ window.screenLeft ' nehnuteľnosť. Takže, začnime!
Tento blog vysvetlí postup používania alebo prístupu k vlastnosti window.screenLeft v JavaScripte.
Ako získať prístup k vlastnosti „window.screenLeft“ v JavaScripte?
' window.screenLeft ” vlastnosť JavaScriptu vracia informácie súvisiace s horizontálnou polohou okna vzhľadom na obrazovku. Táto vlastnosť vracia číselnú hodnotu vo formáte pixlov, ktorá zobrazuje horizontálnu vzdialenosť okna od obrazovky. Navštívte nižšie uvedený kód, v ktorom je „ window.screenLeft “Nehnuteľnosť sa využíva:
< telo >
< h1 štýl = 'farba: morská zelená;' > Linux < / h1 >
< p id = 'cieľ' > < / p >
< skript >
nech i = okno.screenLeft;
document.getElementById('target').innerHTML = 'Vľavo: ' + i;
< / skript >
< / telo >
Popis vyššie uvedeného kódu:
- Po prvé, HTML „ p prvok je vytvorený s ID „ cieľ “.
- Ďalej, „ window.screenLeft Vlastnosť ” sa používa vo vnútri „< skript >“ a výsledok uloží do premennej „ i “.
- Potom vyberte prvok s ID „ cieľ “ a vložte hodnotu “ i“ premenná pomocou „ innerHTML ' nehnuteľnosť.
Ukážka webovej stránky je nasledovná:
Výstup ukazuje, že horizontálna vzdialenosť od ľavého okraja obrazovky je nula pixelov.
Príklad: Dynamické získavanie horizontálnej hodnoty
Vlastnosť screenLeft možno použiť spolu s „ zmeniť veľkosť ” poslucháč udalostí, ktorý poskytuje polohu okna v reálnom čase zodpovedajúcu obrazovke pozdĺž osi x. Rovnakým spôsobom možno polohu pozdĺž osi y alebo vertikálnej osi získať aj pomocou „ window.screenTop ' nehnuteľnosť. Majme kód pre daný scenár:
< telo >< h1 štýl = 'farba: morská zelená;' > Linuxhint < / h1 >
< p id = 'test' < / p >
< skript >
dynamická funkcia ( ) {
nech ja = window.screenLeft;
nech j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Pozícia zľava:' + ja + ', Z horného smeru: ' + j;
}
window.addEventListener ( 'zmeniť veľkosť' , dynamický ) ;
< / skript >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- Najprv bol vytvorený zacielený prvok s id „ test “.
- Ďalej „< skript >“ a „ dynamický ()“ je v ňom vytvorená funkcia.
- Vo vnútri funkcie použite „ window.screenLeft“ a „window.screenTop “ vlastnosti a uložte ich do “ i“ a „j “premenné.
- Potom vyberte zacielený prvok získaním jeho ID “ test “ a pomocou „ innerHTML “vlastnosť zobrazí hodnoty pre obe “ i“ a „j ” premenné na webovej stránke.
- Na záver priložte „ zmeniť veľkosť ” poslucháč udalostí s “ okno “, ktorý vyvoláva „ dynamický ()” vždy, keď sa zmení veľkosť okna.
Náhľad webovej stránky po skončení kompilácie:
Vo vyššie uvedenom výstupe je rozdiel okna od hornej a ľavej strany prijatý v pixeloch pri zmene veľkosti okna.
To je všetko o „ window.screeLeft vlastnosť v JavaScripte.
Záver
Pre prístup k „ window.screenLeft ” v JavaScripte a pripojte “ zmeniť veľkosť ” poslucháč udalosti na “ okno “. Toto vyvolá funkciu spätného volania vždy, keď sa veľkosť okna zmení. Vo vnútri tejto funkcie vytvorte premennú, ktorá ukladá „ window.screenLeft ' nehnuteľnosť. Okrem toho získajte referenciu zacieleného prvku a zobrazte nad ním hodnoty tejto premennej. Tento blog vysvetľuje proces prístupu k vlastnosti window.screenLeft v JavaScripte.