Chcete-li vytvořit dynamické a pixelově dokonalé návrhy webových stránek, je velmi důležité porozumět a používat měření velikosti okna. Požadované rozvržení webové stránky nemusí být vygenerováno, pokud není měření okna provedeno nebo použito správně. Bohužel HTML/CSS neposkytlo žádný atribut nebo vlastnost, aby bylo možné získat přesné informace o velikosti obrazovky okna a vzdálenosti okna od původních hranic obrazovky.
Naštěstí! JavaScript řeší tento problém poskytnutím svého „ window.screenLeft“ a „window.screenTop vlastnosti pro měření polohy okna na obou x“ a „osa y“. “. Naším hlavním cílem v tomto článku je získat polohu podél osy X pomocí „ window.screenLeft ' vlastnictví. Takže, začněme!
Tento blog vysvětlí postup použití nebo přístupu k vlastnosti window.screenLeft v JavaScriptu.
Jak získat přístup k vlastnosti „window.screenLeft“ v JavaScriptu?
' window.screenLeft ” vlastnost JavaScriptu vrací informace související s horizontální polohou okna vzhledem k obrazovce. Tato vlastnost vrací číselnou hodnotu ve formátu pixelů, zobrazující horizontální vzdálenost okna od obrazovky. Navštivte níže uvedený kód, ve kterém je „ window.screenLeft “ nemovitost je využívána:
< tělo >
< h1 styl = 'barva: seagreen;' > Linux < / h1 >
< p id = 'cílová' > < / p >
< skript >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Vlevo: ' + i;
< / skript >
< / tělo >
Popis výše uvedeného kódu:
- Za prvé, HTML ' p 'prvek je vytvořen s id ' cílová “.
- Dále, „ window.screenLeft ” vlastnost se používá uvnitř “< skript >“ a uloží výsledek do proměnné „ i “.
- Poté vyberte prvek s ID „ cílová “ a vložte hodnotu “ i' proměnná pomocí ' vnitřní HTML ' vlastnictví.
Náhled webové stránky je následující:
Výstup ukazuje, že horizontální vzdálenost od levého okraje obrazovky je nula pixelů.
Příklad: Dynamické načítání horizontální hodnoty
Vlastnost screenLeft lze použít spolu s „ změnit velikost ” posluchač událostí, který poskytuje aktuální polohu okna odpovídající obrazovce podél osy x. Stejným způsobem lze polohu podél osy y nebo svislé osy také získat pomocí „ window.screenTop ' vlastnictví. Mějme kód pro daný scénář:
< tělo >< h1 styl = 'barva: seagreen;' > Linuxhint < / h1 >
< p id = 'test' < / p >
< skript >
dynamická funkce ( ) {
nech mě = window.screenLeft;
nechť j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Pozice z levého směru:' + i + ', Z horního směru: ' + j;
}
window.addEventListener ( 'změnit velikost' , dynamický ) ;
< / skript >
Vysvětlení výše uvedeného kódu je následující:
- Nejprve byl vytvořen cílový prvek s id „ test “.
- Dále „< skript >“ a „ dynamický ()“ je v něm vytvořena funkce.
- Uvnitř funkce použijte „ window.screenLeft“ a „window.screenTop “ vlastnosti a uložte je do “ i“ a „j “proměnné.
- Poté vyberte cílový prvek získáním jeho ID “ test “ a s pomocí „ vnitřní HTML ” vlastnost zobrazí hodnoty pro obě “ i“ a „j ” proměnných na webové stránce.
- Na závěr připojte „ změnit velikost ” posluchač události s “ okno “, který vyvolává „ dynamický ()” při každé změně velikosti okna.
Náhled webové stránky po skončení kompilace:
Ve výše uvedeném výstupu je rozdíl okna od horní a levé strany přijat v pixelech při změně velikosti okna.
To je vše o „ window.screeLeft ” vlastnost v JavaScriptu.
Závěr
Pro přístup k „ window.screenLeft ” v JavaScriptu a připojte “ změnit velikost ” posluchač události na “ okno “. To vyvolá funkci zpětného volání pokaždé, když se změní velikost okna. Uvnitř této funkce vytvořte proměnnou, která ukládá „ window.screenLeft ' vlastnictví. Kromě toho načtěte odkaz na cílový prvek a zobrazte nad ním hodnoty této proměnné. Tento blog vysvětlil proces přístupu k vlastnosti window.screenLeft v JavaScriptu.