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 корисна для тимчасового приховування елементів, коли важливо зберегти їх простір на сторінці. Це дозволяє динамічно змінювати видимість елементів без зміни їх розташування, що може бути корисно в багатьох сценаріях веб-розробки.

правити

Порада

Якщо вам потрібно плавно переходити між станами видимості, використовуйте CSS-анімації або JavaScript для додавання класів, які змінюють властивість visibility. Це створить більш приємний візуальний ефект, ніж різке зникнення або поява елементів. Наприклад, ви можете змінювати клас елемента з анімацією прозорості.

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

Порада

Для складних елементів, які включають дочірні елементи, використовуйте visibility: inherit для дочірніх елементів. Це забезпечить, що дочірні елементи будуть автоматично приховані або показані разом із батьківським елементом. Це зручно, коли потрібно зберегти логічну послідовність видимості всередині групи елементів.

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

Порада

Використовуйте visibility у поєднанні з іншими стилями, такими як opacity та z-index, для створення складних ефектів. Наприклад, ви можете приховати елемент (visibility: hidden) і одночасно зменшити його непрозорість (opacity: 0), щоб переконатися, що він повністю непомітний для користувача. Це корисно для управління шарами в складних макетах.

var element = document.getElementById('myElement');
element.style.visibility = 'hidden';
element.style.opacity = '0';
element.style.zIndex = '-1';

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

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

Синтаксис

element.style.visibility

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

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

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

Переглядач
	-	-

Приклади

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

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

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); // Затримка перед поверненням елемента

<button id="showMessageButton">Показати</button>
<div id="message">Демонстраційний елемент</div>

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 секунди
});