JS властивість CSSStyleDeclaration.display

Загальний опис

element.style.display — це властивість, яка використовується для зміни видимості HTML-елемента шляхом встановлення або зміни значення його CSS-властивості display. Вона дозволяє приховувати або відображати елементи на веб-сторінці.

Приклад використання цієї властивості в JavaScript:

let element = document.getElementById('myElement');
element.style.display = 'none'; // Приховує елемент
element.style.display = 'block'; // Відображає елемент

Властивість element.style.display приймає кілька значень, які визначають, як елемент буде відображатися на сторінці:

• none: Елемент повністю прихований, і він не займає місце на сторінці.
• block: Елемент відображається як блоковий елемент, займаючи всю ширину доступного простору.
• inline: Елемент відображається як стрічковий (інлайновий), займаючи тільки необхідну ширину.
• inline-block: Елемент відображається як стрічковий, але при цьому може мати встановлену ширину та висоту.
• flex: Елемент відображається як контейнер гнучкої верстки (flex container).
• grid: Елемент відображається як контейнер сіткової верстки (grid container).

Встановлення та зміна значень

Щоб змінити видимість елемента, потрібно звернутися до його властивості style.display та присвоїти їй відповідне значення. Наприклад, щоб приховати елемент:

let element = document.getElementById('myElement');
element.style.display = 'none';

Щоб відновити відображення елемента, можна змінити значення на інше:

element.style.display = 'block';

Зазвичай element.style.display використовується для створення інтерактивних інтерфейсів, де потрібно показувати або приховувати різні частини сторінки залежно від дій користувача. Наприклад, приховування меню, відображення спливаючих вікон, створення вкладок та інших динамічних елементів інтерфейсу.

Таким чином, element.style.display є потужним інструментом для керування видимістю елементів на веб-сторінці та створення динамічних, інтерактивних користувацьких інтерфейсів.

правити

Порада

Корисно також знати, що зміна element.style.display може впливати на продуктивність, особливо якщо часто змінюються значення для багатьох елементів. У таких випадках варто зменшити кількість змін, об'єднуючи їх в одну операцію або використовуючи інші підходи, як, наприклад, маніпуляції з DOM поза видимою областю.

автор: Bond правити

Порада

Пам'ятайте про використання element.style.display для керування елементами, які можуть змінювати свою структуру чи вміст. Наприклад, приховуючи та відображаючи форми або таблиці, можна значно поліпшити користувацький інтерфейс. Це дозволяє динамічно керувати інтерфейсом, зберігаючи логіку програми зрозумілою і простою.

автор: Bond правити

Порада

Одна з корисних порад для новачків — це перевіряти поточне значення element.style.display перед зміною. Часто програмісти встановлюють display на 'block' або 'none', не перевіряючи поточне значення, що може призводити до непередбачуваних результатів. Наприклад, перед зміною можна використовувати:

if (element.style.display !== 'none') {
    element.style.display = 'none';
}

автор: Bond правити

Порада

Ще одна хитрість полягає у використанні element.style.display разом з анімаціями. Наприклад, перед приховуванням елемента можна запустити анімацію плавного зникнення, а після завершення анімації встановити display на 'none'. Це створить більш плавний користувацький досвід:

element.style.transition = 'opacity 0.5s';
element.style.opacity = '0';
setTimeout(() => {
    element.style.display = 'none';
}, 500);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.display

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<button id="myButton">Натисни</button>
<div id="myElement">Демонстраційний елемент</div>

document.getElementById('myButton').addEventListener('click', function() {
    let myElement = document.getElementById('myElement');
    if (myElement.style.display === 'none') {
        myElement.style.display = 'block';
    } else {
        myElement.style.display = 'none';
    }
});

<div id="errorMessage">Демонстраційний елемент</div>
<input type="text" id="inputField" value="текст для прикладу" placeholder="Введи щось">
<button id="submitBtn">Надіслати</button>

function validateForm() {
    let errorMessage = document.getElementById('errorMessage');
    let inputField = document.getElementById('inputField');

    if (inputField.value === '') {
        errorMessage.style.display = 'block';
    } else {
        errorMessage.style.display = 'none';
    }
}

document.getElementById('submitBtn').addEventListener('click', validateForm);