Свойство Window: innerHeight

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузера. Она доступна во всех браузерах с июля 2015 года.

Только для чтения innerHeight свойство интерфейса Window возвращает внутреннюю высоту окна в пикселях, включая высоту горизонтальной полосы прокрутки, если она есть.

Значение innerHeight берется из высоты визуального области вывода окна. Ширина может быть получена с помощью свойства innerWidth.

Значение

Целочисленное значение, указывающее высоту визуальной области вывода окна в пикселях. Свойство является только для чтения и не имеет значения по умолчанию.

Чтобы изменить высоту окна, вызовите один из его методов изменения размера, таких как resizeTo() или resizeBy().

Примечания по использованию

Чтобы получить высоту окна минус его горизонтальную полосу прокрутки и любые границы, используйте свойство <html> корневого элемента clientHeight вместо этого.

И innerHeight и innerWidth доступны в любом окне или любом объекте, который ведет себя как окно, например, вкладка или фрейм.

Примеры

Предполагая фреймсет

console.log(window.innerHeight); // or

console.log(self.innerHeight);
// will log the height of the frame viewport within the frameset

console.log(parent.innerHeight);
// will log the height of the viewport of the closest frameset

console.log(top.innerHeight);
// will log the height of the viewport of the outermost frameset

Чтобы изменить размер окна, см. window.resizeBy() и window.resizeTo().

Чтобы получить внешнюю высоту окна, т.е. высоту всего окна браузера, см. window.outerHeight.

Графический пример

На рисунке ниже показано различие между outerHeight и innerHeight.

innerHeight vs. outerHeight illustration

Демо

HTML

<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

JavaScript

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);

Результат

Вы также можете просмотреть результаты демо-кода на отдельной странице.

Спецификации

Спецификация
Модуль CSSOM View # dom-window-innerheight

Совместимость с браузерами

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`innerHeight`	1	12	1 В версиях от 4 до 24 это свойство могло возвращать неверное значение до загрузки страницы в определенных ситуациях (см. ошибку 641188).	9	3	18	4 В версиях до 24 это свойство могло возвращать неверное значение до загрузки страницы в определенных ситуациях (см. ошибку 641188).	10.1	1 Это свойство возвращает высоту визуального области вывода вместо области вывода. Подробности см. в ошибке 174362.	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight