JS властивість Object.outerHeight
Загальний опис
Властивість window.outerHeight в JavaScript відіграє важливу роль у визначенні розмірів вікна браузера. Ця властивість повертає зовнішню висоту вікна, включаючи області, такі як панель завдань, рамки вікна та інші елементи інтерфейсу браузера, які не входять до веб-контенту.
window.outerHeight є корисною для розробників, які потребують точного виміру зовнішніх розмірів вікна браузера. Ця інформація може бути використана для різноманітних цілей, включаючи адаптацію веб-інтерфейсу під різні розміри вікон, управління розміщенням вспливаючих вікон, а також для аналітичних цілей.
Застосування на практиці
Отримання зовнішньої висоти вікна: Використовуючи
window.outerHeight, можна отримати повну зовнішню висоту вікна браузера.let outerHeight = window.outerHeight; console.log('Зовнішня висота вікна: ' + outerHeight + ' пікселів');Адаптація інтерфейсу під розміри вікна: Розробники можуть використовувати цю властивість для адаптації дизайну веб-сторінки під різні розміри вікна браузера, наприклад, змінюючи розмір або розташування елементів інтерфейсу.
if (window.outerHeight < 600) { // Змінити макет для невеликих вікон }Управління вікнами:
window.outerHeightможе використовуватися для встановлення або зміни розмірів вікна при створенні вспливаючих вікон.let newWindow = window.open('https://example.com', 'ExampleWindow', 'height=500'); newWindow.resizeTo(500, window.outerHeight);Реагування на зміну розміру вікна: Розробники можуть використовувати
window.outerHeightв обробниках подій для реагування на зміну розмірів вікна.window.onresize = function() { console.log('Нова зовнішня висота: ' + window.outerHeight); };
| Порада: | Пам'ятайте, що значення, яке повертає |
| Порада: | Для початківців важливо розуміти, що |
| Порада: | У досвідчених програмістів, що працюють з комплексними веб-додатками, властивість |
Синтаксис
Window.outerHeightЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
9 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми використовуємо властивість window.outerHeight для отримання зовнішньої висоти вікна браузера. Це може бути корисно для розуміння розмірів вікна, яким користується користувач, що допомагає у рішеннях щодо дизайну та макетування сторінки.
// Отримання зовнішньої висоти вікна браузера
const outerHeight = window.outerHeight;
// Виведення інформації у консоль
console.log("Зовнішня висота вікна браузера становить:", outerHeight);
У цьому прикладі користувач може натиснути на кнопку "Показати висоту вікна", і під кнопкою з'явиться текст, що відображає поточну зовнішню висоту вікна браузера. Це простий та наочний спосіб продемонструвати роботу властивості Window.outerHeight.
<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/css_in_ua/embed/YzBgjeK?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/css_in_ua/pen/YzBgjeK">
Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>У цьому складнішому прикладі ми використовуємо window.outerHeight для адаптивного масштабування контенту на веб-сторінці. Наприклад, ми можемо змінити розмір шрифту або елементів макету на основі висоти вікна, забезпечуючи кращий досвід користування на різних пристроях та вікнах різних розмірів.
// Функція для адаптивного масштабування контенту
function adjustContent() {
const outerHeight = window.outerHeight;
// Визначення розміру шрифту в залежності від висоти вікна
const fontSize = outerHeight < 600 ? '14px' : '16px';
// Застосування розміру шрифту до тіла документу
document.body.style.fontSize = fontSize;
}
// Виклик функції під час завантаження сторінки
window.onload = adjustContent;
// Виклик функції при зміні розмірів вікна
window.onresize = adjustContent;