Височината и ширината са най-важните измерения при проектирането на оформлението на уеб страница.
„Височината“ показва измерването на дължината на обекта отгоре надолу, докато „ширината“ показва колко широк е обектът от едната страна до другата страна. Тези фактори помагат при коригирането на разпределението на обект в прозореца. В JavaScript, „ височина ' и ' ширина ” Свойствата се класифицират допълнително в две категории „вътрешни”, т.е. „вътрешна височина/вътрешна ширина”, и „външни”, т.е. „външна височина/външна ширина”, съответно.
Това описание разработва целта и работата на свойството Window „innerHeight“ в JavaScript.
Какво прави свойството „innerHeight“ на прозореца в JavaScript?
„ вътрешна височина ” е свързано с обекта „прозорец”, който извлича височината на прозореца за изглед на прозореца на браузъра, с изключение на лентата за местоположение, лентата с инструменти, лентата с менюта и други. Освен това включва височината на хоризонталната лента за превъртане, ако е включена. Върнатата стойност на това свойство се взема от прозореца „изглед на оформление“, т.е. област, която показва съдържанието на уеб страницата.
Основен синтаксис
window.innerHeight ИЛИ innerHeight
Според горния синтаксис, „ вътрешна височина ” може лесно да се приложи директно или с помощта на обекта „прозорец”.
Нека приложим на практика дефинираното по-горе свойство с помощта на неговия основен синтаксис.
Пример 1: Прилагане на свойството „innerHeight“ на прозореца за връщане на височината на прозореца на изгледа на прозореца на браузъра
Този пример използва свойството 'innerHeight' с обекта 'window', за да извлече височината на прозореца за изглед на прозореца на браузъра.
HTML код
Първо, погледнете кода по-долу:
< h2 > Свойство вътрешна височина на прозореца h2 >< бутон onclick = 'jsFunc()' > Вземете височина бутон >
< стр документ за самоличност = 'за' > стр >
В горните кодови редове:
- „ ” дефинира подзаглавието от ниво 2.
- „ <бутон> ” тагът представлява бутона, който има събитие „onclick” за извикване на функцията „jsFunc()”, когато събитието се задейства.
- „ ” добавя празен параграф с присвоен идентификатор „para”, за да покаже върнатата стойност на приложеното свойство „innerHeight”.
JavaScript код
Сега продължете с дадения по-долу код:
< сценарий >функция jsFunc ( ) {
позволявам h = window.innerHeight;
document.getElementById ( 'за' ) .innerHTML = 'Вътрешна височина на прозореца: ' + h;
}
сценарий >
В горните редове код:
- Първо, дефинирайте функция с име „ jsFunc() ”.
- В своята дефиниция променливата „h“ прилага „ вътрешна височина ”, използвайки обекта „прозорец”.
- След това приложете „ getElementById() ”, за да получите добавения празен абзац, използвайки неговия идентификатор „para” и да покажете вътрешната височина на текущия прозорец на браузъра в него.
Изход
Както е показано в горния резултат, текущият прозорец на браузъра показва височината на прозореца за изглед (вътрешна височина), т.е. 599 пиксела ” при натискане на бутон.
Пример 2: Прилагане на свойствата „innerHeight“ и „innerWidth“ на комбинирания прозорец
Свойството „innerHeight“ може да бъде приложено заедно с другите свойства на размерите, като „innerWidth“, „outerWidth“, „outerHeight“ и т.н. В този сценарий то се използва заедно с „ вътрешна ширина ' Имот.
HTML код
Нека направим общ преглед на модифицирания HTML код:
< h2 > Свойства на вътрешната височина и вътрешната ширина на прозореца h2 >< бутон onclick = 'jsFunc()' > Вземете височина и ширина бутон >
< стр документ за самоличност = 'за' > стр >
Тук съдържанието на елементите “