Hide element css: 10 Ways to Hide Elements in CSS

Leave a Comment / Css / By /

видимости — CSS: Каскадные таблицы стилей

Свойство CSS видимость показывает или скрывает элемент без изменения макета документа. Свойство также может скрывать строки или столбцы в

.

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

 /* Значения ключевых слов */
видимость: видимая;
видимость: скрытая;
видимость: коллапс;
/* Глобальные значения */
видимость: наследовать;
видимость: начальная;
видимость: вернуться;
видимость: обратный слой;
видимость: не установлена;

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

Значения

видимые

Окно элемента видно.

скрытый

Поле элемента невидимо (не нарисовано), но по-прежнему влияет на компоновку как обычно.

Потомки элемента будут видны, если для них видимость установлена ​​на visible . Элемент не может получить фокус (например, при навигации по индексам вкладок).

обрушение

Ключевое слово свернуть имеет разные эффекты для разных элементов:

  • Для <таблицы> строк, столбцов, групп столбцов и групп строк строки или столбцы скрыты, а занимаемое ими пространство удалено (как если бы отображать : нет были применены к столбцу/строке таблицы). Однако размер других строк и столбцов по-прежнему рассчитывается, как если бы ячейки в свернутой строке (строках) или столбце (столбцах) присутствовали. Это значение позволяет быстро удалить строку или столбец из таблицы без принудительного пересчета ширины и высоты для всей таблицы.
  • Свернутые гибкие элементы и рубиновые аннотации скрыты, а занимаемое ими пространство удалено.
  • Для других элементов свернуть обрабатывается так же, как скрытый .

Использование значения visible hidden для элемента удалит его из дерева специальных возможностей. Это приведет к тому, что элемент и все его дочерние элементы больше не будут объявляться технологией чтения с экрана.

При анимации значения видимости интерполируются между видимыми и невидимыми . Следовательно, одно из начальных или конечных значений должно быть видимым , иначе интерполяция невозможна. Значение интерполируется как дискретный шаг, где значения временной функции между 0 и 1 сопоставляются с видимыми

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

  • Поддержка видимости : свернуть отсутствует или частично некорректен в некоторых современных браузерах. Это может неправильно обрабатываться как видимость: скрытый для элементов, отличных от строк и столбцов таблицы.
  • видимость: свернуть может изменить макет таблицы, если таблица имеет вложенные таблицы внутри свернутых ячеек, если только видимость: видимая указывается явно для вложенных таблиц.
Initial value visible
Applies to all elements
Inherited yes
Computed value as specified
Animation type a visibility
 видимость = 
 видимость | 
 скрыто | 
 коллапс

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

HTML 
 
Первый абзац виден. 


Второй абзац НЕ виден.



  Виден третий абзац. Обратите внимание, что второй абзац все еще занимает
  пространство.
CSS 
 .видимый {
  видимость: видимая;
}
.невидимый {
  видимость: скрытая;
}

Пример таблицы

HTML 
 
    <тд>2.1
    <тд>3.1
    <тд>3.2
    <тд>3.3
 CSS 
 
 .collapse {
  видимость: коллапс;
}
стол {
  граница: 1px сплошной красный;
}
тд {
  граница: 1px сплошной серый;
}
 

  

    1.1
    1.2
    1.3
  

  

    2.2
    2.3
  

  

  


 
 Спецификация
 Стоимость каскадного стиля. Включите JavaScript для просмотра данных.
  •   дисплей 
  Последнее изменение:   , участниками MDN
 javascript — Каковы возможные способы скрыть элемент с помощью CSS 
 спросил 
 Изменено
 2 года, 1 месяц назад
 Просмотрено
 69 тысяч раз
 Я пытаюсь скрыть элемент HTML с помощью CSS.
 <выбрать>
 
, но он очень устойчивый, даже с элементом Google Inspect я не могу изменить стиль.
  
  •  JavaScript
  •  HTML
  •  CSS
 4
 Это просто, просто установите для свойства  display  значение  none  в CSS:
 #tinynav1
{
  дисплей: нет
}
 
 снова, когда вы хотите показать это, установите  дисплей  на  блок  .
   видимость: скрыто   скрывает элемент, но занимает место в макете.
   отображение: нет   полностью удаляет элемент из документа. Он не занимает места, хотя HTML-код для него все еще находится в исходном коде.
 Другие преимущества использования  display  :
   display:none   означает, что рассматриваемый элемент вообще не будет отображаться на странице (хотя вы все еще можете взаимодействовать с ним через DOM).
 
 
 Для него не будет выделено места между другими элементами. 
   visibility:hidden   означает, что в отличие от  display:none  элемент не виден, но для него выделено место на странице.
 использовать  дисплей:нет;  или  видимость:скрыта; 
 1
 CSS:
 select#tinynav1 { display: none; }
 
 или, если необходимо скрыть несколько вариантов выбора, используйте соответствующий класс:
 select.tinynav1 { display: none; }
 
 Как встроенный стиль, вы также можете сделать это (что вы можете попробовать для инспектора):
   или создайте класс css с этим параметром и назначьте класс