css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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 перед зміною. Часто програмісти встановлюють display на 'block' або 'none', не перевіряючи поточне значення, що може призводити до непередбачуваних результатів. Наприклад, перед зміною можна використовувати:

if (element.style.display !== 'none') {
    element.style.display = 'none';
}
Порада:

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

element.style.transition = 'opacity 0.5s';
element.style.opacity = '0';
setTimeout(() => {
    element.style.display = 'none';
}, 500);
Порада:

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

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

Синтаксис

element.style.display

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

У цьому прикладі кнопка з ідентифікатором "myButton" використовується для перемикання видимості елемента з ідентифікатором "myElement". При кожному натисканні на кнопку перевіряється поточне значення "display" елемента, і якщо він прихований (display: 'none'), то елемент стає видимим (display: 'block'), і навпаки. Це корисно для створення інтерфейсів, де потрібно динамічно приховувати або показувати певні частини сторінки без перезавантаження.

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';
    }
});

У цьому прикладі метод "element.style.display" використовується для показу повідомлення про помилку, якщо поле введення пусте. Коли користувач натискає кнопку "submitBtn", функція validateForm перевіряє, чи є введення в полі "inputField". Якщо поле пусте, повідомлення про помилку з'являється (display: 'block'), інакше воно ховається (display: 'none'). Цей підхід є ефективним для забезпечення інтерактивної валідації форм на стороні клієнта.

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);

Спільнота

Зв'язок