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