Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : visibility
смотрим также
Материал из Справочник Web-языков
Содержание |
Атрибут visibility | Свойство visibility
Определяет будет ли объект показываться или будет скрыт.
Синтаксис
HTML | { visibility : sVisibility } |
Скрипты | [ sVisibility= ] object.style.visibility |
Используемые значения
- sVisibility
- Строка, которая может определять и принимать от одно из следующих значений:
- inherit
- Значение по умолчанию. Значение свойства наследуется от родительского объекта.
- visible
- Объект видимый.
- hidden
- Объект невидимый.
- collapse
- Применяется в таблицах для скрытия отдельных строк (row) и столбцов (column). Для остальных элементов его действие аналогично hidden.
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является inherit. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
В отличии от display:none, при использовании данного свойства объект невидим для пользователя, но физически он присутствует на странице, как если бы он был видимый.
Используйте свойство visibility в скриптах, чтобы динамически скрывать или показывать отдельные блоки сайта или части контента, осуществляя таким образом взаимодействие с пользователем.
Примеры
В следующих примерах используются атрибут visibility и свойство visibility для определения где объект будет видимым, а где нет.
В первом примере используются два класса, описанных в разделе style, чтобы показывать/скрывать рисунок при наведении пользователем курсора мыши на текст.
<head> <style> .vis1 { visibility: visible; } .vis2 { visibility: hidden; } </style> </head> <body> <img id="oSphere" src="sphere.jpg" alt="sphere"> <p onmouseover="oSphere.className='vis2'" onmouseout="oSphere.className='vis1'"> Наведите курсор мыши на текст, чтобы рисунок сферы исчез.</p> </body>
Во втором примере используется вызов функции, чтобы скрыть рисунок.
<head> <script type="text/javascript"> function disappear() { oSphere.style.visibility="hidden"; } function reappear() { oSphere.style.visibility="visible"; } </script> </head> <body> <img src="sphere.jpeg" id="oSphere"> <p id="oTxt" onmouseover="disappear()" onmouseout="reappear()"> Наведите курсор мыши на текст, чтобы рисунок сферы исчез.</p> </body>
Стандарты
Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)
Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0, 3.5
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms531180(VS.85).aspx