Пример
Делает элемент h2 невидимым:<html>
<head>
<meta charset="utf-8" />
<style>
h1.visible { visibility:visible; }
h1.hidden { visibility:hidden; }
</style>
</head>
<body>
<h1 class="visible">Это видимый заголовок</h1>
<h1 class="hidden">Это невидимый заголовок</h1>
<p>Обратите внимание, что невидимый заголовок все еще занимает место.</p>
</body>
</html>
Определение и использование
Свойство visibility указывает показать или скрыть элемент.
Совет: Даже невидимые элементы занимают место на странице. Используйте свойство display для создания невидимых элементов, которые не занимают место!
| Значение по умолчанию: | visible |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS2 |
| Синтакс JavaScript: | object.style.visibility="hidden" |
Поддержка браузеров
Свойство visibility поддерживается во всех ведущих браузерах.
Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение "inherit" или "collapse".
Значения свойства
| Значение | Описание | Играйте |
|---|---|---|
| visible | Элемент видим. Это по умолчанию | Играйте » |
| hidden | Элемент не видим (но все еще занимает место) | Играйте » |
| collapse | Только для элементов таблицы. collapse удаляет строку или столбец, но не влияет на макет таблицы. Место, занимаемое строкой или столбцом будет доступно для других данных. Если collapse используется для других элементов, оно действует как "hidden" | Играйте » |
| inherit | Указывает, что значение свойства visibility должно быть унаследовано от родительского элемента |
Больше примеров
Пример
Этот пример демонстрирует, как обрушить элемент таблицы.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
tr.collapse { visibility:collapse; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>Ваня</td>
<td>Школьников</td>
</tr>
<tr class="collapse">
<td>Лиза</td>
<td>Семенова</td>
</tr>
</table>
<p><b>Примечание:</b> Internet Explorer поддерживает visibility:collapse только если указан !DOCTYPE.</p>
</body>
</html>Была ли эта информация полезной?
