Главная » Языки программирования

visibility

На чтение 7 мин
Содержание
  1. visibility
  2. Синтаксис
  3. Значения
  4. Объектная модель
  5. Браузеры
  6. visibility
  7. Синтаксис
  8. Значения
  9. Синтаксис
  10. Интерполяция
  11. Примеры
  12. Базовый пример
  13. HTML
  14. CSS
  15. Пример с таблицей
  16. HTML
  17. CSS
  18. Соображения доступности
  19. Примечания
  20. Спецификация
  21. Совместимость с браузерами
  22. Found a content problem with this page?
  23. CSS visibility Property
  24. Browser Support
  25. CSS Syntax
  26. Property Values
  27. More Examples
  28. Example
  29. Related Pages
  30. COLOR PICKER
  31. Report Error
  32. Thank You For Helping Us!
  33. visibility
  34. Синтаксис
  35. Значения
  36. Объектная модель
  37. Браузеры

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display .

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

visible Отображает элемент как видимый. hidden Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. collapse Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden . В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none . Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     .descr < visibility: hidden; >.b:hover + .descr

Объектная модель

[window.]document.getElementById(» elementID «).style.visibility

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и collapse .

Браузер Safari до версии 4.0 не поддерживает значение collapse .

Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Источник

visibility

Чтобы скрыть и удалить элемент из разметки, установите свойству display значение none , вместо использования visibility .

Синтаксис

/* Значения */ visibility: visible; visibility: hidden; visibility: collapse; /* Глобальные значения */ visibility: inherit; visibility: initial; visibility: unset;

Свойство visibility указывается в качестве одного из значений ниже.

Значения

Значение по умолчанию, элемент виден.

Читайте также:  Тег топ в html

Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible . Элемент не может получить focus (например, при навигации с помощью tabindex).

* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display : none применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.

  • Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
  • Для других элементов collapse обрабатывается также, как hidden

Синтаксис

Интерполяция

Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible , интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() со значениями вне [0, 1]) ближе к конечной точке.

Примеры

Базовый пример

HTML

p class="visible">Первый параграф виден.p> p class="not-visible">Второй параграф не виден.p> p class="visible">Третий параграф также виден. Заметь, второй параграф занимает место.p>

CSS

.visible  visibility: visible; > .not-visible  visibility: hidden; >

Пример с таблицей

HTML

table> tr> td>1.1td> td class="collapse">1.2td> td>1.3td> tr> tr class="collapse"> td>2.1td> td>2.2td> td>2.3td> tr> tr> td>3.1td> td>3.2td> td>3.3td> tr> table>

CSS

.collapse  visibility: collapse; > table  border: 1px solid red; > td  border: 1px solid gray; >

Соображения доступности

Использование visibility со значением hidden на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.

Примечания

  • Поддержка visibility:collapse отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать visibility:hidden со столбцами и строками.
  • visibility:collapse может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока visibility:visible не указан явно для вложенной таблицы.

Спецификация

Specification Status Comment
CSS Flexible Box Layout Module
Определение ‘visibility’ в этой спецификации.		 Кандидат в рекомендации Определяет значение collapse применимым к flex элементам
CSS Box Model
Определение ‘visibility’ в этой спецификации.		 Кандидат в рекомендации Без изменений
CSS Transitions
Определение ‘visibility’ в этой спецификации.		 Рабочий черновик Определяет visibility как анимируемое.
CSS Level 2 (Revision 1)
Определение ‘visibility’ в этой спецификации.		 Рекомендация Изначальное определение
Начальное значение visible
Применяется к все элементы
Наследуется да
Обработка значения как указано
Animation type видимость

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 13 авг. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

CSS visibility Property

The visibility property specifies whether or not an element is visible.

Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

Default value: visible
Inherited: yes
Animatable: yes. Read about animatable
Version: CSS2
JavaScript syntax: object.style.visibility=»hidden» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

), row groups (), columns (), column groups (). This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.
Value Description Demo
visible Default value. The element is visible Demo ❯
hidden The element is hidden (but still takes up space) Demo ❯
collapse Only for table rows (

More Examples

Example

This example demonstrates how to make a table element collapse:

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display .

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

visible Отображает элемент как видимый. hidden Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. collapse Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden . В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none . Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     .descr < visibility: hidden; >.b:hover + .descr

Объектная модель

[window.]document.getElementById(» elementID «).style.visibility

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и collapse .

Браузер Safari до версии 4.0 не поддерживает значение collapse .

Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Источник

Оцените статью
© 2023 Программирование