Per creare progetti di pagine Web dinamici e pixel-perfect, le misurazioni delle dimensioni della finestra sono molto fondamentali da comprendere e utilizzare. Il layout della pagina web desiderato potrebbe non essere generato se la misurazione della finestra non viene presa o utilizzata correttamente. Sfortunatamente, HTML/CSS non fornisce alcun attributo o proprietà per ottenere informazioni precise sulla dimensione dello schermo della finestra e sulla distanza della finestra dai confini dello schermo originale.
Fortunatamente! JavaScript risolve questo problema fornendo il suo ' window.screenLeft” e “window.screenTop ' per misurare la posizione della finestra sia su ' x” e “asse y 'rispettivamente. Il nostro obiettivo principale in questo articolo è ottenere una posizione lungo l'asse X con l'aiuto del ' window.screenLeft ' proprietà. Quindi iniziamo!
Questo blog spiegherà la procedura per utilizzare o accedere alla proprietà window.screenLeft in JavaScript.
Come accedere alla proprietà 'window.screenLeft' in JavaScript?
IL ' window.screenLeft ” di JavaScript restituisce l'informazione relativa alla posizione orizzontale di una finestra, rispetto allo schermo. Questa proprietà restituisce il valore numerico in formato pixel, che mostra la distanza orizzontale della finestra dallo schermo. Visita il codice seguente, in cui ' window.screenLeft 'la proprietà viene utilizzata:
< corpo >
< h1 stile = 'colore: verde mare;' > Linux < / h1 >
< P id = 'bersaglio' > < / P >
< sceneggiatura >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'Sinistra: ' + i;
< / sceneggiatura >
< / corpo >
Descrizione del codice sopra:
- Innanzitutto, l’HTML “ P L'elemento ' viene creato con l'ID ' bersaglio ”.
- Successivamente, il “ window.screenLeft La proprietà ' viene utilizzata all'interno del file '< sceneggiatura >' tag e memorizza il risultato nella variabile ' io ”.
- Quindi, seleziona l'elemento con un ID ' bersaglio ’ e inserisci il valore di “ i' variabile utilizzando la variabile ' innerHTML ' proprietà.
L'anteprima della pagina web è la seguente:
L'output mostra che la distanza orizzontale dal limite sinistro dello schermo è pari a zero pixel.
Esempio: recupero dinamico del valore orizzontale
La proprietà screenLeft può essere utilizzata insieme al comando ' ridimensionare ” ascoltatore di eventi per fornire la posizione in tempo reale della finestra corrispondente allo schermo lungo l'asse x. Allo stesso modo, la posizione lungo l'asse y o l'asse verticale può essere recuperata anche utilizzando il comando “ window.screenTop ' proprietà. Diamo un codice per lo scenario dato:
< corpo >< h1 stile = 'colore: verde mare;' > Suggerimento Linux < / h1 >
< P id = 'test' >< / P >
< sceneggiatura >
dinamica della funzione ( ) {
lasciami = window.screenLeft;
lascia che j = window.screenTop;
document.getElementById ( 'test' ) .innerHTML = 'Posizione dalla direzione sinistra: ' +io+ ', Dalla direzione superiore: ' +j;
}
window.addEventListener ( 'ridimensionare' , dinamico ) ;
< / sceneggiatura >
La spiegazione del codice sopra è la seguente:
- Innanzitutto, l'elemento target è stato creato con l'ID ' test ”.
- Successivamente, il '< sceneggiatura >' viene utilizzato il tag e il tag ' dinamico ()” viene creata al suo interno.
- All'interno della funzione, utilizzare il ' window.screenLeft” e “window.screenTop ' proprietà e memorizzarle in ' i” e “j 'variabili rispettivamente.
- Successivamente, seleziona l’elemento target ottenendo il suo ID “ test ' e con l'aiuto del ' innerHTML La proprietà ' visualizza i valori per entrambi ' i” e “j 'variabili sulla pagina web.
- Alla fine, allega il “ ridimensionare ' ascoltatore di eventi con ' finestra ' che invoca il ' dinamico ()” ogni volta che la dimensione della finestra viene modificata.
Anteprima della pagina web dopo la fine della compilazione:
Nell'output sopra, la differenza della finestra tra i lati superiore e sinistro viene ricevuta in pixel man mano che la finestra viene ridimensionata.
Questo è tutto merito del “ window.screeLeft 'proprietà in JavaScript.
Conclusione
Per accedere al “ window.screenLeft ' in JavaScript e allega la proprietà ' ridimensionare 'ascoltatore di eventi' finestra ”. Questo richiama la funzione di callback ogni volta che la dimensione della finestra viene ridimensionata. All'interno di questa funzione, crea una variabile che memorizza il ' window.screenLeft ' proprietà. Inoltre, recupera il riferimento dell'elemento target e visualizza i valori di questa variabile su di esso. Questo blog ha spiegato il processo per accedere alla proprietà window.screenLeft in JavaScript.