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

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

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

Значення властивості visibility можуть бути наступними: visible, hidden, collapse (для таблиць) та inherit. Значення visible робить елемент видимим, що є значенням за замовчуванням. Значення hidden робить елемент невидимим, але зберігає його розташування та простір, який він займає. Значення collapse використовується для рядків таблиці і колонок, щоб зробити їх невидимими та прибрати з розмітки, але це значення не має жодного ефекту на інші елементи. Значення inherit успадковує значення властивості visibility від батьківського елемента.

Розглянемо декілька прикладів використання властивості visibility через JavaScript.

Приклад 1: Зробити елемент невидимим. Це корисно, коли потрібно приховати елемент тимчасово, не змінюючи його розташування на сторінці.

var element = document.getElementById('myElement');
element.style.visibility = 'hidden';

У цьому прикладі елемент з id myElement стає невидимим, але продовжує займати своє місце в розмітці.

Приклад 2: Показати елемент, який раніше був прихований. Це зручно для відображення прихованих елементів, коли це необхідно.

var element = document.getElementById('myElement');
element.style.visibility = 'visible';

У цьому прикладі елемент з id myElement знову стає видимим.

Приклад 3: Використання властивості visibility разом з подією для динамічного приховування та показу елемента.

var button = document.getElementById('toggleButton');
var element = document.getElementById('myElement');

button.addEventListener('click', function() {
  if (element.style.visibility === 'hidden') {
    element.style.visibility = 'visible';
  } else {
    element.style.visibility = 'hidden';
  }
});

У цьому прикладі кнопка з id toggleButton змінює видимість елемента з id myElement при кожному натисканні.

Приклад 4: Використання значення inherit для успадкування значення від батьківського елемента.

var parentElement = document.getElementById('parentElement');
var childElement = document.getElementById('childElement');

parentElement.style.visibility = 'hidden';
childElement.style.visibility = 'inherit';

У цьому прикладі дочірній елемент успадковує значення властивості visibility від батьківського елемента і стає невидимим разом з ним.

Властивість visibility корисна для тимчасового приховування елементів, коли важливо зберегти їх простір на сторінці. Це дозволяє динамічно змінювати видимість елементів без зміни їх розташування, що може бути корисно в багатьох сценаріях веб-розробки.

Синтаксис

element.style.visibility

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

var element = document.getElementById('fadeElement');

function fadeOut(element) {
  element.style.transition = 'opacity 0.5s ease';
  element.style.opacity = '0';
  setTimeout(function() {
    element.style.visibility = 'hidden';
  }, 500); // Час анімації повинен відповідати часу у transition
}

function fadeIn(element) {
  element.style.visibility = 'visible';
  element.style.transition = 'opacity 0.5s ease';
  element.style.opacity = '1';
}

// Викликати функції для тестування
fadeOut(element);
setTimeout(function() {
  fadeIn(element);
}, 1000); // Затримка перед поверненням елемента

var button = document.getElementById('showMessageButton');
var message = document.getElementById('message');

button.addEventListener('click', function() {
  message.style.visibility = 'visible';
  setTimeout(function() {
    message.style.visibility = 'hidden';
  }, 3000); // Повідомлення приховується через 3 секунди
});