Объект 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>. Оба поддерживаются во всех основных браузерах.

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

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

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

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