Свойство CSS visibility отвечает за видимость объектов в html. Это уникальное свойство, которое позволяет скрыть любой объект, при этом важной особенностью является то, что объект занимает место на странице. Отметим, что объект скрывается вместе с границами.
Синтаксис CSS visibility
visibility: visible | hidden | collapse | inherit;
Где
- visible (по умолчанию) - элемент является видимым
- hidden - элемент становится невидимым
- collapse - применяется для ячеек таблицы (тег <table>). Заданные строки и колонки убираются, а таблица перестраивается по новой
- inherit - наследование от элемента родителя;
Примеры: скрытие объектов в html через visibility
<html> <head> <style> .primer1{ visibility: visible; } .primer2{ visibility: hidden; } </style> </head> <body> <div class="primer1">Абзац 1. Обычный текст со свойством visibility: visible;</div> <div class="primer2">Абзац 1. Обычный текст со свойством visibility: hidden;</div> <div class="primer1">Абзац 1. Обычный текст со свойством visibility: visible;</div> </body> </html>
На странице преобразуется в следующее
Примечание:
Псевдокласс :hover не работает вместе с visibility. Другими словами если мы хотим скрывать объекты при наведении, то это не будет работать. Для этого можно воспользоваться другим свойством: opacity, которое отвечает за прозрачность.
Для обращения к visibility из JavaScript нужно писать следующую конструкцию:
[window.]document.getElementById("elementID").style.visibility="VALUE"
Читайте также:
• Свойство text-decoration
• Свойство vertical-align
• Как сделать рамку элементов border
• Как сделать фон на сайте html
• Как сделать анимацию в html
• Отступ padding
• Отступ margin
• letter-spacing
• font