Wysokość i szerokość to najważniejsze wymiary przy projektowaniu układu strony internetowej.
„Wysokość” oznacza pomiar długości obiektu od góry do dołu, podczas gdy „szerokość” wskazuje, jak szeroki jest obiekt z jednej strony na drugą. Czynniki te pomagają w dostosowaniu alokacji obiektu w oknie. W JavaScript „ wysokość ' I ' szerokość ” właściwości są dalej podzielone na dwie kategorie „wewnętrzne”, tj. „innerHeight/innerWidth” i „zewnętrzne”, tj. odpowiednio „outerHeight/outerWidth”.
Ten artykuł omawia cel i działanie właściwości Window „innerHeight” w JavaScript.
Co robi właściwość Window „innerHeight” w JavaScript?
„ wysokość wewnętrzna ” jest powiązana z obiektem „okno”, który pobiera wysokość rzutni okna przeglądarki z wyłączeniem paska lokalizacji, paska narzędzi, paska menu i innych. Obejmuje również wysokość poziomego paska przewijania, jeśli jest uwzględniony. Zwracana wartość tej właściwości jest pobierana z okna „rzutni układu”, tj. obszaru, w którym wyświetlana jest zawartość strony internetowej.
Podstawowa składnia
window.innerHeight LUB innerHeight
Zgodnie z powyższą składnią „ wysokość wewnętrzna ” można łatwo zastosować bezpośrednio lub za pomocą obiektu „window”.
Zaimplementujmy wyżej zdefiniowaną właściwość praktycznie za pomocą jej podstawowej składni.
Przykład 1: Zastosowanie właściwości „innerHeight” okna w celu zwrócenia wysokości rzutni okna przeglądarki
W tym przykładzie zastosowano właściwość „innerHeight” z obiektem „window” w celu pobrania wysokości rzutni okna przeglądarki.
Kod HTML
Najpierw spójrz na poniższy kod:
< h2 > Właściwość wewnętrzna wysokości okna h2 >< przycisk na kliknięcie = 'jsFunc()' > Uzyskaj wzrost przycisk >
< P ID = 'Do' > P >
W powyższych liniach kodu:
- „ Znacznik ” określa podtytuł poziomu 2.
- „
Znacznik ” reprezentuje przycisk ze zdarzeniem „onclick” wywołującym funkcję „jsFunc()” po uruchomieniu zdarzenia. - „ Tag ” dodaje pusty akapit z przypisanym identyfikatorem „para”, aby wyświetlić zwróconą wartość zastosowanej właściwości „innerHeight”.
Kod JavaScript
Teraz przejdź do kodu podanego poniżej:
< scenariusz >funkcjonować jsFunc ( ) {
pozwalać h = okno.wysokość wewnętrzna;
document.getElementById ( 'Do' ) .innerHTML = „Wewnętrzna wysokość okna:” + h;
}
scenariusz >
W powyższych liniach kodu:
- Najpierw zdefiniuj funkcję o nazwie „ jsFunc() ”.
- W swojej definicji zmienna „h” stosuje „ wysokość wewnętrzna ” za pomocą obiektu „window”.
- Następnie zastosuj „ getElementById() ”, aby uzyskać dodany pusty akapit za pomocą jego identyfikatora „para” i wyświetlić w nim wewnętrzną wysokość bieżącego okna przeglądarki.
Wyjście
Jak pokazano na powyższym wyjściu, bieżące okno przeglądarki wyświetla wysokość rzutni (wysokość wewnętrzna), tj. „ 599px ” po kliknięciu przycisku.
Przykład 2: Stosowanie połączonych właściwości okna „innerHeight” i „innerWidth”.
Właściwość „innerHeight” może być zaimplementowana wraz z innymi właściwościami wymiarów, takimi jak „innerWidth”, „outerWidth”, „outerHeight” itp. W tym scenariuszu jest używana wraz z „ szerokość wewnętrzna ' nieruchomość.
Kod HTML
Przyjrzyjmy się zmodyfikowanemu kodowi HTML:
< h2 > Właściwości okna innerHeight i innerWidth h2 >< przycisk na kliknięcie = 'jsFunc()' > Uzyskaj wysokość i szerokość przycisk >
< P ID = 'Do' > P >
Tutaj zawartość elementów „