Tworząc interfejsy dla stron internetowych często trzeba korzystać z JavaScript. Oczywiście jest to złe, ale w niektórych sytuacjach po prostu niemożliwe jest całkowite zaimplementowanie wszystkiego w CSS.
Najczęstszą potrzebą jest określenie szerokości lub wysokości okna przeglądarki w celu dalszej manipulacji. Poniżej skrótu znajdują się wszystkie informacje na ten temat.
Gdzie może się to przydać?Nie będę wypowiadał się w imieniu wszystkich, ale mi się to przyda przy integracji z Textpattern wszelkiego rodzaju galeriami, sliderami itp., gdzie wszystko jest napisane w czystym JS. Rzeczy ściśle związane z JS są rzadkie, ale zdarzają się, dlatego pojawiła się ta notatka.
Można to zdefiniować na 2 sposoby: JS lub jQuery.
Określanie szerokości lub wysokości przy użyciu czystego JSJest to najbardziej preferowana metoda, ponieważ prawie każdy ma silnik JavaScript nowoczesna przeglądarka. Nawet przeglądarki mobilne nauczyłem się pracować z JS.
Oczywiście istnieje możliwość, że użytkownik sam wyłączy przetwarzanie JS w przeglądarce, ale wydaje mi się, że takich „dziwnych ludzi” jest niewiele, ponieważ prawie każda witryna korzysta z jakiegoś rozwiązania działającego na JS.
W JS, aby określić rozmiary ekranu, musisz skorzystać z funkcji:
Screen.width //Szerokość ekranu screen.height //Wysokość ekranu
Oto bezsensowny przykład użycia:
alert(szerokość ekranu+"x"+wysokość ekranu);
Jeśli użyjesz tego do umieszczenia niektórych elementów na stronie, to najlepszym rozwiązaniem nie będzie używać rozmiarów ekranu, ale rozmiary okien przeglądarki. W JS robi się to tak:
Document.body.clientWidth //Szerokość przeglądarki document.body.clientHeight //Wysokość przeglądarki
W związku z tym oto bezsensowny przykład użycia:
alert(document.body.clientWidth+"x"+document.body.clientHeight);
Rozmiar przeglądarki za pomocą jQueryOsobiście stosuję metodę opisaną poniżej. Ta metoda działa tylko wtedy, gdy wcześniej zainstalowałeś bibliotekę jQuery w swojej witrynie. We wszystkich witrynach, które muszę tworzyć, ta biblioteka jest de facto standardem.
Aby w naszym zadaniu wykorzystać jQuery, musimy użyć kodu:
$(okno).szerokość(); //Szerokość przeglądarki $(okno).wysokość(); //Wysokość przeglądarki
Na koniec chciałbym powiedzieć, że jeśli da się obejść się bez JS i jQuery w ogóle lub częściowo, to właśnie to musisz zrobić.
Udostępnij w mediach społecznościowych sieci
W tej lekcji przyjrzymy się właściwościom obiektu okna, za pomocą których można uzyskać wymiary obszaru roboczego okna przeglądarki (innerWidth i internalHeight), wymiary samego okna (outerWidth i externalHeight), jego położenie względem lewego górnego rogu ekranu użytkownika (screenLeft i screenTop) oraz pozycje przewijania (pageXOffset i pageYOffset).
właściwości internalWidth i internalHeightMają na celu uzyskanie wymiarów widocznego obszaru roboczego okna przeglądarki. Te. Właściwości internalWidth i internalHeight mają na celu uzyskanie szerokości i wysokości obszaru, w którym wyświetlany jest dokument HTML. Te właściwości są tylko do odczytu i zwracają wartości pikseli.
Na przykład uzyskaj wysokość i szerokość widocznego obszaru roboczego okna przeglądarki:
Szerokość widocznego obszaru wyświetlania (widthContenArea):
Szerokość widocznego obszaru wyświetlania (wysokośćContenArea):
// szerokość widocznej rzutni (dla wszystkich przeglądarek z wyjątkiem Internet Explorera 8) var szerokośćContenArea = window.innerWidth; // wysokość widocznej rzutni (dla wszystkich przeglądarek z wyjątkiem Internet Explorera 8) var heightContenArea = window.innerHeight; // szerokość widocznej rzutni (dla przeglądarki Internet Explorer 8) szerokośćContenArea = document.documentElement.clientWidth || dokument.body.clientWidth; // wysokość widocznej rzutni (dla przeglądarki Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // szerokość widocznej rzutni (dla wszystkich przeglądarek) szerokośćContenArea1 = window.innerWidth || document.documentElement.clientWidth || dokument.body.clientWidth; // wysokość widocznej rzutni (dla wszystkich przeglądarek) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = szerokośćContenArea; document.getElementById("heightContenArea").innerHTML = wysokośćContenArea; właściwości externalWidth i externalHeightMają one na celu uzyskanie wymiarów całego okna przeglądarki, tj. w tym paski narzędzi, paski przewijania, pasek stanu, obramowania okien itp. Właściwości externalWidth i externalHeight są tylko do odczytu i zwracają odpowiednio szerokość i wysokość okna w pikselach.
Na przykład uzyskaj wysokość i szerokość okna przeglądarki:
Szerokość okna przeglądarki (widthWindow):
Wysokość okna przeglądarki (heighWindow):
// szerokość okna przeglądarki var szerokośćWindow = window.outerWidth; // wysokość okna przeglądarki var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = szerokość okna; document.getElementById("wysokość okna").innerHTML = wysokość okna; właściwości screenLeft (screenX) i screenTop (screenY).Mają za zadanie uzyskać współrzędne lewego górnego rogu okna przeglądarki lub dokumentu względem lewego górnego rogu ekranu użytkownika.
W tym przypadku właściwości screenLeft i screenTop działają w przeglądarce Internet Explorer, a właściwości screenX i screenY działają w przeglądarce Mozilia Firefox. W Przeglądarki Chrome, Safari i innych podobnych przeglądarkach, możesz używać zarówno właściwości screenLeft i screenTop, jak i właściwości screenX i screenY.
Korzystając z tych właściwości należy wziąć pod uwagę fakt, że niektóre przeglądarki mogą zwracać współrzędne lewego górnego rogu dokumentu, a niektóre przeglądarki mogą zwracać współrzędne lewego górnego rogu okna. Właściwości screenleft (screenX) i screenTop (screenY) są tylko do odczytu i zwracają odpowiednio poziomą i pionową odległość względem lewego rogu ekranu w pikselach.
Przykładowo wyświetlmy w formie komunikatu współrzędne x i y lewego rogu bieżącego okna przeglądarki (dokumentu) względem lewego górnego rogu ekranu:
funkcja windowXY() ( // Wykorzystując właściwości screenleft i screenTop otrzymujemy współrzędne lokalizacji okna (dokumentu) var winX = window.screenLeft; var winY = window.screenTop; // Korzystając z właściwości screenX i screenY otrzymujemy współrzędne lokalizacji okna (dokumentu) winX = window.screenX; winY = window.screenY; // Uzyskaj współrzędne lokalizacji okna (dokumentu) we wszystkich przeglądarkach winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert („Współrzędne okna względem ekranu użytkownika: X = „ + winX + ”, Y = „ + winY + „.”); ) Dowiedz się współrzędne
Mają na celu uzyskanie liczby pikseli, o jaką dokument został przewinięty w poziomie (pageXOffset) lub pionie (pageYOffset) względem lewego górnego rogu okna. Właściwości scrollX i scrollY są odpowiednikami właściwości pageXOffset i pageYOffset. Te właściwości są tylko do odczytu.
Na przykład wyświetl w komunikacie liczbę pikseli, o jaką dokument został przewinięty w poziomie (pageXOffset) i pionie (pageYOffset).
funkcja scrollContent() ( //Przewiń bieżący dokument o 200 pikseli w prawo i w dół window.scrollBy(200,200); //Pobierz wartości za pomocą właściwości pageXOffset i pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Pobierz wartości, o które dokument był przewijany w poziomie lub w pionie dla przeglądarki Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Dla wszystkich przeglądarek: winOffsetX = window.pageXOffset || dokument .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert („Liczba pikseli, o jaką dokument został przewinięty w poziomie i w pionie: X = „ + winOffsetX + ”, Y = „ + winOffsetY + ”. "); ) Sprawdź położenie pasków przewijania
Po co to? Na przykład mamy piękny układ strony internetowej, który ukazuje całe swoje piękno dopiero w rozdzielczości, powiedzmy, 1600 na 1200. Ma na przykład bardzo duży piękny kapelusz. Co się stanie, jeśli dana osoba odwiedzi witrynę w rozdzielczości 1024 na 768? Tak, widoczny będzie tylko kapelusz. Niedobrze? Być może. Dlaczego więc nie zrobić czegoś takiego, aby biorąc pod uwagę wysokość przeglądarki/ekranu, nagłówek został po prostu odcięty, a menu i reszta witryny poszła? Wow, właśnie tego potrzebujesz.
Właściwie opisałem jeden z przykładów, z którymi spotkałem się w praktyce (patrz zdjęcie). Rozwiązałem problem po prostu - poprzez JavaScript. A może przez jQuery, nie pamiętam. Opiszę tutaj obie metody.
Przede wszystkim należy rozróżnić definicje „rozdzielczości ekranu” od „rozmiaru okna przeglądarki” (w niektórych artykułach zdarzały się bowiem incydenty – jedne metody krytykowano, inne proponowano, chociaż w jednym przypadku zmierzono rozdzielczość przeglądarki, w drugim - rozdzielczość monitora).
Musisz od samego początku określić, co jest dla Ciebie ważniejsze. W przypadku tego przykładu z nagłówkiem kierowałem się rozdzielczością ekranu (monitora): w końcu strona jest piękna, jeśli okno przeglądarki zostanie ręcznie zmniejszone, to pozwól im przy przeglądaniu tego rozwinąć przeglądarkę do pełnego ekranu witrynę (no wiesz, nie mają żadnego biznesu, notatka redaktora). Ale na przykład, aby dostosować rozwinięty obraz galerie jQuery Lightbox Użyłem szerokości i wysokości przeglądarki.
A po dokonaniu wyboru piszemy kod, być może w nagłówku strony. Najpierw przykład skupiający się na rozdzielczości ekranu.
Linie 3-6 to wyłącznie JavaScript, linie 7-11 to przykład w jQuery. Do określenia szerokości i wysokości wykorzystywane są metody javascript screen.width i screen.height. Działanie tych linii jest jasne: pierwszy skrypt określa ścieżkę do dodatkowego pliku CSS, a drugi skrypt ustawia właściwość CSS „background-position” dla bloku z identyfikatorem total.
Spójrzmy na drugi przykład, ale który skupi się na rozdzielczości przeglądarki. Wszystko jest takie samo, zmieniły się metody.
A więc na podstawie dwóch przykładów krótka recenzja- do czego używać:
Oczywiste jest, że jeśli używasz jQuery, to opcja 5 jest lepsza od 3, a 6 od 4 - są po prostu krótsze. Cóż, to zależy od smaku i koloru.
Jeśli chodzi o konkretne wpisy dotyczące wysokości i szerokości ekranu dla jQuery, szczerze mówiąc, nie znam ich. Teoretycznie powinna być taka struktura jak 5-6 linii, ale jakoś w praktyce się z tym nie spotkałem, wydaje mi się, że takich nie ma. I nie jest to konieczne, screen.width to wystarczająco krótka konstrukcja, wystarczy.
Tak, istnieje również $(document).width() - określa szerokość Dokument HTML. Zastosowanie w praktyce jest w jakiś sposób wątpliwe. Kto wie, będzie mi miło, jeśli udostępnisz.
To wszystko na dzisiaj! Wytrzymajmy do weekendu i chodźmy masowo na grille! (chyba że jesteś na coś chory, jak niektórzy - przyp. red.). Powodzenia!
