Aby tworzyć dynamiczne i doskonałe w pikselach projekty stron internetowych, zrozumienie i wykorzystanie pomiarów rozmiaru okna jest bardzo istotne. Żądany układ strony internetowej może nie zostać wygenerowany, jeśli pomiar okna nie zostanie wykonany lub zastosowany prawidłowo. Niestety, HTML/CSS nie zapewniał żadnego atrybutu ani właściwości pozwalającej uzyskać dokładną wiedzę na temat rozmiaru ekranu okna i odległości okna od krawędzi oryginalnego ekranu.
Na szczęście! JavaScript rozwiązuje ten problem, udostępniając „ window.screenLeft” i „window.screenTop ” umożliwiające zmierzenie położenia okna zarówno na „ x” i „oś y odpowiednio. W tym artykule skupiliśmy się głównie na ustaleniu pozycji wzdłuż osi X za pomocą „ okno.ekranLewy ' nieruchomość. A więc zacznijmy!
W tym blogu wyjaśniona zostanie procedura użycia lub uzyskania dostępu do właściwości window.screenLeft w JavaScript.
Jak uzyskać dostęp do właściwości „window.screenLeft” w JavaScript?
„ okno.ekranLewy ” Właściwość JavaScript zwraca informację związaną z poziomym położeniem okna względem ekranu. Ta właściwość zwraca wartość liczbową w formacie pikselowym, pokazując poziomą odległość okna od ekranu. Odwiedź poniższy kod, w którym „ okno.ekranLewy ” Nieruchomość jest użytkowana:
< ciało >
< h1 styl = „kolor: morski zielony;” > Linuksa < / h1 >
< P ID = 'cel' > < / P >
< scenariusz >
niech i = window.screenLeft;
document.getElementById('target').innerHTML = 'Po lewej: ' + i;
< / scenariusz >
< / ciało >
Opis powyższego kodu:
- Po pierwsze, kod HTML „ P ” tworzony jest element z identyfikatorem „ cel ”.
- Następnie „ okno.ekranLewy ” jest używana wewnątrz „< scenariusz >” i przechowuje wynik w zmiennej „ I ”.
- Następnie wybierz element o identyfikatorze „ cel ’ i wstaw wartość „ i” przy użyciu zmiennej „ wewnętrznyHTML ' nieruchomość.
Podgląd strony internetowej wygląda następująco:
Dane wyjściowe pokazują, że odległość pozioma od lewej krawędzi ekranu wynosi zero pikseli.
Przykład: dynamiczne pobieranie wartości poziomej
Właściwość screenLeft może być używana razem z właściwością „ Zmień rozmiar ” detektor zdarzeń w celu zapewnienia w czasie rzeczywistym położenia okna odpowiadającego ekranowi wzdłuż osi x. W ten sam sposób położenie wzdłuż osi y lub osi pionowej można również odczytać, korzystając z opcji „ okno.ekranGóra ' nieruchomość. Przygotujmy kod dla danego scenariusza:
< ciało >< h1 styl = „kolor: morski zielony;” > Podpowiedź dotycząca Linuksa < / h1 >
< P ID = 'test' >< / P >
< scenariusz >
funkcja dynamiczna ( ) {
pozwól mi = okno.ekranLewy;
niech j = okno.ekranGóra;
dokument.getElementById ( 'test' ) .innerHTML = „Pozycja od lewego kierunku:” + ja + ', Z górnego kierunku: ' + j;
}
window.addEventListener ( 'Zmień rozmiar' , dynamiczny ) ;
< / scenariusz >
Wyjaśnienie powyższego kodu jest następujące:
- Najpierw utworzono docelowy element o identyfikatorze „ test ”.
- Następnie „< scenariusz >” i znacznik „ dynamiczny ()” tworzona jest w nim funkcja.
- Wewnątrz tej funkcji użyj przycisku „ window.screenLeft” i „window.screenTop ” właściwości i przechowuj je w „ ja” i „j odpowiednio zmienne.
- Następnie wybierz docelowy element, pobierając jego identyfikator „ test ” i przy pomocy „ wewnętrznyHTML ” wyświetla wartości zarówno dla „ ja” i „j ” zmienne na stronie internetowej.
- Na koniec dołącz „ Zmień rozmiar ” detektor zdarzeń z „ okno ”, który przywołuje „ dynamiczny ()” każdorazowo przy zmianie rozmiaru okna.
Podgląd strony po zakończeniu kompilacji:
W powyższym wyniku różnica okna od górnej i lewej strony jest wyrażana w pikselach w miarę zmiany rozmiaru okna.
To wszystko, jeśli chodzi o „ okno.screeLeft ”właściwość w JavaScript.
Wniosek
Aby uzyskać dostęp do „ okno.ekranLewy ” w JavaScript i dołącz właściwość „ Zmień rozmiar ” słuchacz zdarzeń „ okno ”. Wywołuje to funkcję wywołania zwrotnego za każdym razem, gdy zmienia się rozmiar okna. Wewnątrz tej funkcji utwórz zmienną przechowującą „ okno.ekranLewy ' nieruchomość. Co więcej, pobierz referencję do docelowego elementu i wyświetl nad nim wartości tej zmiennej. W tym blogu wyjaśniono proces uzyskiwania dostępu do właściwości window.screenLeft w JavaScript.