Объект window представляет окно, содержащее документ DOM. Этот объект может быть главным окном, набором фреймов или отдельным фреймом, или даже новым окном, созданным с помощью JavaScript.

Как вы помните из предыдущих глав руководства, мы использовали метод alert() в наших скриптах для отображения всплывающих сообщений. Это метод объекта window.

В следующих нескольких главах мы увидим ряд новых методов и свойств объекта window, которые позволяют нам делать такие вещи, как запрос информации, подтверждение действий пользователя, открытие новых окон и т. д. Это позволяет добавить больше интерактивности к вашим веб-страницам.

Расчет ширины и высоты окна

Для определения ширины и высоты области просмотра окна браузера (в пикселях), включая горизонтальную и вертикальную полосу прокрутки есть свойства innerWidth и innerHeight. Вот пример, который отображает текущий размер окна при нажатии кнопки:

<script>
function windowSize(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Получить размер окна</button>

Однако, если вы хотите узнать ширину и высоту окна, исключая полосы прокрутки, вы можете использовать свойства clientWidth и clientHeight любого элемента DOM (например, div), как показано ниже:

<script>
function windowSize(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Получить размер окна</button>

Объект document.documentElement представляет корневой элемент документа, который является элементом <html>, тогда как объект document.body представляет элемент <body>. Оба поддерживаются во всех основных браузерах.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.