Есть ли противоположность для отображения: none?
напротив visibility: hidden is visibility: visible. Аналогично, есть ли противоположность для display: none?
многие люди путаются, выясняя, как показать элемент, когда он имеет display: none, так как это не так ясно, как использование visibility собственность.
я мог бы просто использовать visibility: hidden вместо display: none, но это не дает того же эффекта, поэтому я не собираюсь с ним.
11 ответов
display: none не имеет буквальной противоположности, как visibility:hidden делает.
на visibility свойство определяет, является ли элемент видимым или нет. Поэтому она имеет два состояния (visible и hidden), которые противоположны друг другу.
на display свойство, однако, решает, какие правила компоновки будет следовать элемент. Существует несколько различных типов правил для того, как элементы будут выкладываться в CSS, поэтому существует несколько разных значений (block, inline, inline-block etc -см. документацию для этих значений здесь ).
display:none полностью удаляет элемент из макета страницы, как будто его там нет.
все остальные значения для display заставьте элемент быть частью страницы, поэтому в некотором смысле они все напротив display:none.
но нет ни одного значения, которое является прямым обратным display:none - так же, как нет ни одного стиля волос, который противоположен "лысый."
истинная напротив display: none нет (пока).
но display: unset очень близко и работает в большинстве случаев.
С MDN (Сеть Разработчиков Mozilla):
ключевое слово unset CSS представляет собой комбинацию начальных и наследуемых ключевых слов. Как и эти два других ключевых слова CSS, он может быть применен к любому свойству CSS, включая CSS shorthand all. Это ключевое слово сбрасывает свойство до его наследуемого значения, если оно наследует его родитель или его начальное значение, если нет. Другими словами, он ведет себя как ключевое слово inherit в первом случае и как начальное ключевое слово во втором случае.
обратите внимание также, что display: revert в настоящее время разрабатывается. См.MDN для сведения.
при изменении элемента display в Javascript во многих случаях подходящая опция для "отмены" результата element.style.display = "none" и element.style.display = "". Это удаляет display декларация style атрибут, возвращающий фактическое значение display свойство для значения, заданного в таблице стилей для документа (для браузера по умолчанию, если не переопределено в другом месте). Но более надежный подход-иметь класс в CSS, такой как
.invisible { display: none; }
и добавление / удаление этого имени класса в/из element.className.
Как объясняет Пол, нет буквальной противоположности display: none в HTML, поскольку каждый элемент имеет другой дисплей по умолчанию, и вы также можете изменить дисплей с помощью класса или встроенного стиля и т. д.
однако, если вы используете что-то вроде jQuery, их функции show и hide ведут себя так, как будто есть противоположность display none. Когда вы скрываете, а затем снова показываете элемент, он будет отображаться точно так же, как и до его скрытия. Они делают это, сохраняя старое значение свойства display при скрытии элемента, чтобы при повторном отображении он отображался так же, как и до его скрытия. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180
это означает, что если вы установите div, например, для отображения inline или inline-block, и вы скроете его, а затем покажете его снова, он снова будет отображаться как display inline или inline-block так же, как это было до
<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>
сценарий:
$('a').click(function(){
$('div').toggle();
});
обратите внимание, что свойство display div останется постоянным даже после того, как оно было скрыто (display:none) и показано снова.
в случае дружественной таблицы стилей принтера я использую следующее:
/* screen style */
.print_only { display: none; }
/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }
я использовал это, когда мне нужно было распечатать форму, содержащую значения, и поля ввода были трудны для печати. Поэтому я добавил значения, завернутые в span.тег print_only (div .print_only использовался в другом месте), а затем применил .класс no_print для полей ввода. Таким образом, на экране вы увидите поля ввода, а при печати-только значения. Если вы хотите получить фантазии, вы можете использовать JS для обновления значения в тегах span при обновлении полей, но в моем случае это не было необходимо. Возможно, не самое элегантное решение, но оно работало для меня!
видимость: hidden скроет элемент, но элемент является их с DOM. И в случае отображения: none он удалит элемент из DOM.
таким образом, у вас есть опция для элемента, чтобы скрыть или отобразить. Но как только вы удалите его (я имею в виду display none), он не имеет четкого противоположного значения. дисплей имеет несколько значений, таких как display:block,display:inline, display:inline-block и многие другие. вы можете проверить это из W3C.