В чем разница между видимостью: скрытой и отображаемой: нет?


1173

Правила CSS visibility:hiddenи display:noneоба приводят к тому, что элемент не виден. Это синонимы?

Ответы:


1475

display:noneозначает, что данный тег вообще не будет отображаться на странице (хотя вы все равно можете взаимодействовать с ним через dom). Там не будет места, выделенного для него между другими тегами.

visibility:hiddenозначает, что в отличие display:noneот тега не видно, но для него выделено место на странице. Тег отображается, его просто не видно на странице.

Например:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Замена [style-tag-value]с display:noneрезультатами в:

test |   | test

Замена [style-tag-value]с visibility:hiddenрезультатами в:

test |                        | test

14
Нет комментариев по поводу исполнения одного и другого? Мне интересно, какой метод использовать, чтобы скрыть абсолютно позиционированные элементы, которые часто отображаются и скрываются.
Томаш Зато - Восстановить Монику

2
Это полное предположение, что я не проводил никаких тестов, но я думаю, они примерно одинаковые. Как только что-то меняется на экране, весь экран будет перерисован (по крайней мере, раньше), и это не имеет значения. Вы все еще заставляете перерисовку экрана. Тем не менее, это может очень сильно зависеть от браузера, и на самом деле, возможно, есть лучшие способы оптимизировать код, чем фокусироваться на них.
kemiller2002

13
@Kevin прав в этом visibility: hiddenи display: noneбудет одинаково эффективен, так как они оба размечают макет, рисуют и комбинируют. Однако opacity: 0он функционально эквивалентен visibility: hiddenшагу макета и не запускает его повторно, поэтому я бы посоветовал использовать его, если вы не возражаете против того, что пустое пространство все еще выделяется (в противном случае используйте display: none).
Джайробин

76
Важно помнить о css-переходах при обсуждении видимости и отображения. Например, переключение из видимости: скрытый; для видимости: видимый; позволяет использовать css-переходы, тогда как переключение с дисплея: нет; отобразить: блок; не. visibility: hidden имеет дополнительное преимущество - не захватывает события javascript, тогда как opacity: 0; фиксирует события.
Майкл Дил

9
opacity: 0следует использовать с осторожностью при работе со входами или кнопками, так как они все еще существуют и могут вызывать странные взаимодействия с пользователем.
Жак Моэтт

233

Они не синонимы.

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

visibility:hidden оставляет элемент в нормальном потоке страницы таким образом, что он все еще занимает место.

Представьте, что вы в очереди, чтобы прокатиться в парке развлечений, а кто-то в очереди становится настолько хулиганом, что его срывает охрана. Все в очереди будут двигаться вперед на одну позицию, чтобы заполнить пустую ячейку. Это как display:none.

Сравните это с аналогичной ситуацией, но кто-то перед вами надевает плащ-невидимку. При просмотре строки будет выглядеть, как будто есть пустое пространство, но люди не могут заполнить это пустое пространство, потому что кто-то еще там. Это как visibility:hidden.


3
Между ними есть еще одно большое отличие: по крайней мере, в Chrome видимость можно использовать с задержкой перехода, но дисплей игнорирует ее.
SapphireSun

1
Забавный способ объяснить, но интересно. :)
Elango Paul Victor

107

Одна вещь, которую стоит добавить, хотя об этом не спрашивали, это то, что существует третий вариант сделать объект полностью прозрачным. Рассматривать:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Не забудьте нажать кнопку «Выполнить фрагмент кода» выше, чтобы увидеть результат.)

Разница между 1 и 2 уже была указана (а именно, 2 все еще занимает место). Однако между 2 и 3 существует различие: в случае 3 мышь все равно переключится на руку при наведении курсора на ссылку, и пользователь все равно сможет щелкнуть ссылку, а события Javascript по-прежнему будут срабатывать по ссылке. Это обычно не то поведение, которое вы хотите (но, может быть, иногда это так).

Другое отличие заключается в том, что если вы выделите текст, а затем скопируете / вставите его как обычный текст, вы получите следующее:

1st link.
2nd  link.
3rd unseen link.

В случае 3 текст действительно копируется. Может быть, это будет полезно для некоторых типов водяных знаков, или если вы хотите скрыть уведомление об авторских правах, которое будет отображаться, если неосторожно пользователь скопирует / вставит ваш контент?


@greenoldman Можете ли вы привести пример? Вот jsfiddle, где скрытый элемент (я пробовал div и span), который является единственным элементом в своем контейнере и все еще занимает место: jsfiddle.net/rmb5wdLd/1
Kip

@Kip, странно - я не могу сделать это сейчас (и я также изменил свой собственный проект). Хорошо, я лучше уберу свой предыдущий комментарий, и когда у меня будет хороший тестовый пример, я покажу его, извините за шум.
Гринольдман

90

display:none удаляет элемент из потока макета.

visibility:hidden скрывает это, но оставляет пространство.


70

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

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

В этом случае ни один из div не будет виден. Но если вы напишите так:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Тогда дочерний div будет виден, тогда как родительский div не будет показан.


Хороший вопрос, это может быть легко пропущено. display: none / block не будет запускать переходы, поэтому использование visibility: hidden может работать, но дочерние элементы также нуждаются в vilibility: одновременно скрытые
Drenai

18

Они не синонимы - display: noneудаляют элемент из потока страницы, а остальная часть страницы течет так, как если бы его там не было.

visibility: hidden скрывает элемент от просмотра, но не от потока страницы, оставляя место для него на странице.


15

display: none удаляет элемент со страницы полностью, и страница создается так, как если бы элемент вообще отсутствовал.

Visibility: hidden оставляет место в потоке документов, даже если вы его больше не видите.

Это может иметь или не иметь большого значения в зависимости от того, что вы делаете.


Использование $ ('# element'). Remove () полностью удаляет элемент со страницы (DOM). Не отображать его или не использовать пробел не означает его удаление. Вы все еще можете изменить его статус с помощью простого $ ('# element'). Show (), поэтому он не "полностью удален".
foxontherock

11

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


Со скрытым, сохраняется ли пространство только вертикальным измерением. Как насчет горизонтально?
Крис Ное

2
Горизонтальное измерение также сохраняется.
JB Hurteaux

9

display:noneбудет скрывать элемент и разрушать занимаемое пространство, тогда как visibility:hiddenбудет скрывать элемент и сохранять пространство элементов. display: none также влияет на некоторые свойства, доступные в javascript в более старых версиях IE и Safari.


7

В дополнение ко всем остальным ответам, для IE8 есть важное отличие: если вы используете display:noneи пытаетесь получить ширину или высоту элемента, IE8 возвращает 0 (в то время как другие браузеры возвращают фактические размеры). IE8 возвращает правильную ширину или высоту только для visibility:hidden.



6
display: none; 

Он не будет доступен на странице и не занимает места.

visibility: hidden; 

он скрывает элемент, но все равно будет занимать то же пространство, что и раньше. Элемент будет скрыт, но все же повлияет на макет.

visibility: hiddenсохранить пространство, в то время display: noneкак не сохранить пространство.

Пример отображения: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Пример скрытого видимости: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility


Я бы посоветовал не связываться с w3schools из-за известных неточностей на сайте.
Скере

5

Если для свойства видимости установлено значение "hidden", браузер по-прежнему будет занимать место на странице для содержимого, даже если оно невидимо.
Но когда мы устанавливаем объект в "display:none", браузер не выделяет место на странице для его содержимого.

Пример:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Посмотреть детали


5

visibility:hidden сохранит элемент на странице и займет это место, но не покажет пользователю.

display:none не будут доступны на странице и не занимают места.



2

Разница выходит за рамки стиля и отражается в том, как элементы ведут себя при работе с JavaScript.

Эффекты и побочные эффекты display: none:

  • целевой элемент извлекается из потока документов (не влияет на расположение других элементов);
  • затрагиваются все потомки (тоже не отображаются и не могут «убрать» это наследство);
  • измерения не могут быть сделаны для целевого элемента , ни для своих потомков - они не отображаются вообще, таким образом , их clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), все возвращаются 0с.

Эффекты и побочные эффекты visibility: hidden:

  • целевой элемент скрыт от просмотра, но не выводится из потока и влияет на макет, занимая его обычное пространство;
  • innerText(но не innerHTML) целевого элемента и потомков возвращает пустую строку.

1

display:none;не будет отображать элемент и не будет выделять пространство для элемента на странице, тогда как visibility:hidden;не будет отображать элемент на странице, но будет выделять пространство на странице. Мы можем получить доступ к элементу в DOM в обоих случаях. Чтобы понять это лучше, посмотрите на следующий код: display: none vs visibility: hidden


0

Здесь много подробных ответов, но я подумал, что должен добавить это, чтобы решить проблему доступности, так как это имеет значение.

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

Вопрос также касается синонимов. text-indent: -9999px;это еще один, который примерно эквивалентен. Важным отличием text-indentявляется то, что он часто будет читаться программами чтения с экрана. Это может быть немного плохим опытом, поскольку пользователи все еще могут переходить по ссылке.

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

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Хорошей практикой является создание ссылки «Skip to content» на якорь основной части контента. Слабовидящие пользователи, вероятно, не хотят слушать ваше полное дерево навигации на каждой странице. Сделайте ссылку визуально скрытой. Пользователи могут просто нажать вкладку, чтобы получить доступ к ссылке.

Для получения дополнительной информации о доступности и скрытом контенте см .:

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.