Настройка видимости против скрытия/шоу

В чем разница между element.css('visibility', 'visible') и element.show(). Кроме того, в чем разница между element.css('visibility', 'hidden') и element.hide()?

Обновить. Кроме того, что является самым правильным способом скрыть элемент и все его поддеревья?

Обновить N2: что является правильным способом узнать, является ли элемент (и его поддерево) видимым: element.is(':visible') или element.css('visibility')?

Обновить N3. Есть ли способ скрыть элемент (полностью), но он все равно сохранит пространство/область на странице браузера? (насколько мне известно - правильным способом было бы позвонить hide(), но это может привести к визуальной реструктуризации страницы.

ОТВЕТЫ

Ответ 1

Видимость по-прежнему будет сохранять пространство в вашем браузере.

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

.hide() равно .css('display', 'none')
.show() равно .css('display', 'block') - я уверен, что jQuery делает какую-то магию здесь, чтобы решить, действительно ли это будет block, но это несколько равно.

@Update:
После того, как вы скроете элемент с помощью .hide() (или .css('display', 'none')), все элементы, расположенные вниз по дереву, которые являются дочерними элементами этого элемента, также будут скрыты.

@Update 2:
Если вы используете .hide() и .show(), то .is(':visible') Если вы используете атрибут css видимости, то .css('visibility')

@Update 3:
То, что делает .css('visibility', 'hidden'), он скрывает элемент без реструктуризации страницы. .hide() полностью удалит элемент.

Ответ 2

jquery.hide() эквивалентно вызову .css('display', 'none') и jquery.show эквивалентно вызову .css('display', 'block')

Метод .css() просто устанавливает свойство видимости.

С точки зрения css точки зрения:

visbility : hidden

Скрытое значение делает созданные поля невидимыми без их удаления из макета. Коробки-потомки могут быть сделаны видимыми. Смотрите это

display : none

Значение none не приводит к тому, что элемент вообще не генерирует поле. Потоки потомков также не могут создавать поля, даже если их свойство отображения установлено на что-то иное, чем ничто. См. Это

С скрытым элемент все еще сгенерирован.

Ответ 3

Взято с w3schools.com:

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

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

Ответ 4

Они устанавливают 2 разных свойства css: hide/show устанавливает свойство display в none, show удаляет этот параметр, чтобы использовать значение по умолчанию (например, "block" для div).

Различие, как указывают другие ответы, состоит в том, что вызов hide на элементе означает, что он (и все его предки) не займет какое-либо пространство. Если установка visibility в hidden будет эффективно просто сделать элементы полностью прозрачными (но все равно занимать место).

Для ответов на ваши изменения:

  • Скрыть всех предков (это делается автоматически с помощью обоих методов).
  • Используйте element.is(':visible'), так как это выполняет проверку как свойств visibility, так и display и чтобы увидеть, не являются ли height и width не 0, он также рекурсивно рекурсивно реализует предков, тогда как element.css('visibility') просто сообщает вам visibility этого элемента.
  • Настройка element.css('visibility', 'hidden') сделает это - не вызывает element.hide().

Ответ 5

В дополнение к объяснению bardiir вот хорошая демонстрация "display: none" и "visibility: hidden" http://www.w3schools.com/css/css_display_visibility.asp

"удалить" наборы кнопок "display: none" и "hide" наборы кнопок "visibility: hidden".