css властивість visibility
Властивість visibility визначає, чи буде елемент приховано. Властивість призначена для відображення або приховування елемента, включаючи рамку навколо нього і фон. Під час приховування елементу, хоча він і стає прихованим, місце, яке він займає, залишається за ним. Якщо передбачається вивід різних елементів в одне і те ж місце екрану, для обходу цієї особливості слід використовувати абсолютне позиціонування або скористатися властивістю display.
Властивість visibility також приховує рядки і колонки таблиці (<table>). Якщо треба не тільки приховати елемент, але й також повністю прибрати його з потоку - використовуйте властивість display.
| Порада: | Навіть невидимі елементи займають місце на сторінці. Використовуй css властивість |
| Нотатка: | Специфікація |
Синтаксис
visibility: visible|hidden|collapse|initial|inherit;Властивість visibility може отримувати 5 значень:
visibleВідображає елемент як видимий.
hiddenЕлемент стає невидимим. На відмінно від властивості display:none, продовжує займати місце на макеті сторінки.
collapseТільки для таблиць. Робить комірку чи рядок невидимою, при цьому, на відмінно від властивості display:none макет таблиці не змінюється.
Це значення не підтримується браузером Internet Explorer.
Якщо це значення застосовується не до таблиці, то результат його використання буде таким же, як hidden.
initialВстановлює властивість у значення без задання.
inheritВказує на спадковість властивостей від свого батьківського елемента.
| Значення без задання: | visible |
|---|---|
| Наслідує: | Так |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.visibility="hidden" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| visible, hidden | 1.0 |
4.0 |
1.0 |
1.0 |
4.0 |
12.0 |
| collapse | 1.0 |
8.0 |
1.0 |
4.0 |
9.5 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| collapse | 4.0 |
Не підтримується |
1.0 |
| visible, hidden | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Приклад роботи властивості visibility
Простий приклад, який показує як сховати елемент за допомогою властивості visibility.
Демонстрація роботи властивості