Visibility html: Hide or show HTML elements using visibility property in JavaScript

Leave a Comment / Html / By /

Свойства CSS — visibility

БраузерInternet ExplorerNetтscapeОпераSafariMozilla Firefox
Версия5.56.07.08.08.09.07.08.09.29.51.32.03.11.52.03.0
ПоддерживаетсяЧаст.Част.Част.ДаДаДаДаДаДаДаДаДаДаДаДаДа

Част. — поддерживается частично.

CSS (ЦСС)CSS (ЦСС)2
Значение по умолчаниюvisible
НаследуетсяДа
ПрименяетсяКо всем элементам
Аналог ШТМЛНет

Описание

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

Синтаксис

visibility: visible | hidden | collapse

Аргументы

visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse

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

Этот аргумент не поддерживается браузером Internet Эксплорер.

Пример

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>visibility</title>
  <script type="text/javascript"> 
   function hiddenLayer() {
    document.getElementById("descr").style.visibility = "hidden";
   }
   function showLayer() {
    document.getElementById("descr").style.visibility = "visible";
   }
  </script>
 </head>
 <body>
  
  <p><a href="#"><img 
  src="button.gif" alt="Кнопка"></a></p>
  <div>
   Данная эксклюзия является подмножеством астрациональных 
   супремативных монотенных федоний кадонарного экстрафазория.</div>
  
 </body>
</html>

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

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

Примечание

Аргумент collapse браузер Mozilla поддерживает только с версии 1.8а. Internet Эксплорер это значение игнорирует полностью.

➥ visibility — htmlbook.info

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+9.5+1.0+4.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюvisible
НаследуетсяДа
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visufx.html#propdef-visibility

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3
    

Описание

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>visibility</title>
  <style>
   .descr { visibility: hidden; }
   .b:hover + .descr {
    visibility: visible;
   }
  </style>
 </head>
 <body>
  <img src="images/button.gif" alt="Кнопка">
  <div>
   Данная эксклюзия является подмножеством астрациональных 
   супремативных монотенных федоний кадонарного экстрафазория.</div>
 </body>
</html>

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

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

Браузеры

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

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

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

Понимание Критерия Успеха 2.4.7: Видимый Фокус

Намерение

Цель этого критерия успеха — помочь человеку узнать, какой элемент имеет фокус клавиатуры.

«Режим работы» учетных записей для пользовательских агентов, которые не всегда могут отображать индикатор фокуса, или отображать индикатор фокусировки только при использовании клавиатуры. Пользовательские агенты могут оптимизировать когда отображается индикатор фокусировки, например, он отображается только при использовании клавиатуры. Авторы несут ответственность за предоставление хотя бы одного режима работы, в котором основное внимание видно. В большинстве случаев существует только один режим работы, поэтому этот критерий успеха применяется. Индикатор фокуса не должен быть ограничен по времени, когда фокус клавиатуры показано, что он должен оставаться.

Обратите внимание, что индикатор фокуса клавиатуры может принимать различные формы.

Преимущества

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

Примеры

  • Когда текстовые поля получают фокус, в поле отображается вертикальная черта, указывающая что пользователь может вставить текст, ИЛИ весь текст выделен, указывая, что пользователь может печатать поверх текста.
  • Когда элемент управления пользовательского интерфейса получает фокус, вокруг него отображается видимая рамка. Это.

Связанные ресурсы

Ресурсы предназначены только для информационных целей, одобрение не подразумевается.

  • Стилизация элементов управления формы с помощью CSS, новый взгляд

Техника

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

Достаточные методы

  1. G149: использование компонентов пользовательского интерфейса, которые выделяются пользовательским агентом при получении фокус
  2. C15: Использование CSS для изменения представления компонента пользовательского интерфейса, когда он получает фокус
  3. G165: использование индикатора фокусировки по умолчанию для платформы, чтобы индикаторы фокусировки будут перенесены
  4. G195: использование предоставленного автором видимого индикатора фокусировки
  5. C40: Создание двухцветного индикатора фокусировки для обеспечения достаточного контраста со всеми компонентами
  6. SCR31: Использование скрипта для изменения цвета фона или границы элемента с фокусом

Сбои

Ниже приведены распространенные ошибки, которые считаются несоответствующими этому критерию успеха. рабочей группой WCAG.

  • F55: Невыполнение критериев успеха 2.1.1, 2.4.7 и 3.2.1 из-за использования сценария для удаления фокус при получении фокуса
  • F78: Невыполнение критерия успеха 2.4.7 из-за контуров и границ элементов стиля в способ, который удаляет или делает невидимым индикатор визуального фокуса

Видимость проекта и группы | GitLab

  • Публичные проекты и группы
  • Внутренние проекты и группы
  • Частные проекты и группы
  • Изменить видимость проекта
  • Изменить видимость группы
  • Ограничение использования публичных или внутренних проектов

Если у вас есть роль владельца, вы можете установить видимость проекта или группы как:

  • Частный

    • Эти уровни видимости влияют на то, кто может видеть проект в каталоге общего доступа. (например, https://gitlab.com/public).

    Для более детального управления можно определить какие функции в проекте видны.

    Настройка видимости проекта должна быть как минимум такой же ограничительной как видимость его родительской группы. Например, в закрытую группу могут входить только частные проекты, в то время как публичная группа может включать частные, внутренние и общедоступные проекты.

    Общественные проекты и группы

    Общедоступные проекты можно клонировать без аутентификации через HTTPS.

    Они перечислены в каталоге общего доступа ( /public ) для всех пользователей.

    Общедоступные группы могут иметь общедоступные, внутренние или частные подгруппы.

    Любой вошедший пользователь имеет роль гостя в репозитории.

    примечание

    По умолчанию /public виден пользователям, не прошедшим проверку подлинности. Однако, если Общий уровень видимости ограничен, /public виден только зарегистрированным пользователям.

    Внутренние проекты и группы

    Внутренние проекты могут быть клонированы любым зарегистрированным пользователем, за исключением внешние пользователи.

    Они также перечислены в каталоге общего доступа ( /public ), но только для зарегистрированных пользователей.

    Внутренние группы могут иметь внутренние или частные подгруппы.

    Все зарегистрированные пользователи, кроме внешних пользователей, имеют Гостевая роль в репозитории.

    note

    С июля 2019 года параметр видимости Internal отключен для новых проектов, групп, и фрагменты на GitLab.com. Существующие проекты, группы и фрагменты, использующие Internal настройка видимости сохраните эту настройку. Подробнее об изменении можно прочитать в актуальная проблема.

    Частные проекты и группы

    Частные проекты могут клонировать и просматривать только участники проекта (кроме гостей).

    Они отображаются в каталоге общего доступа ( /public ) только для участников проекта.

    Частные группы могут иметь только частные подгруппы.

    Изменить видимость проекта

    Вы можете изменить видимость проекта.

    Необходимое условие:

    • У вас должна быть роль владельца проекта.
    1. На верхней панели выберите Главное меню > Проекты и найдите свой проект.
    2. На левой боковой панели выберите Настройки > Общие .
    3. Развернуть Видимость, функции проекта, разрешения .
    4. Изменить Видимость проекта на Частный , Внутренний или Общий .
    5. Выберите Сохранить изменения .

    Изменить видимость группы

    Вы можете изменить видимость всех проектов в группе.

    Предварительные требования:

    • Вы должны иметь роль владельца группы.
    • Подгруппы и проекты уже должны иметь настройки видимости не ниже ограничительный в качестве новой настройки родительской группы.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *