Противоположность visibility: hidden равна visibility: visible. Аналогично, существует ли какая-либо противоположность для display: none?
Многие люди запутываются, выясняя, как показать элемент, когда он имеет display: none, поскольку он не так понятен, как использование свойства visibility.
Я мог бы просто использовать visibility: hidden вместо display: none, но он не дает такого же эффекта, поэтому я не собираюсь с ним.
display: none не имеет буквенной противоположности, как visibility:hidden.
Свойство visibility определяет, является ли элемент видимым или нет. Поэтому он имеет два состояния (visible и hidden), которые противоположны друг другу.
Свойство display, однако, определяет, какие правила компоновки будут следовать за элементом. Существует несколько различных правил для того, как элементы будут выкладываться в CSS, поэтому существует несколько разных значений (block, inline, inline-block и т.д. - см. Документацию для этих значений здесь).
display:none полностью удаляет элемент из макета страницы, как будто он там не был.
Все остальные значения для display заставляют элемент быть частью страницы, поэтому в некотором смысле они противоположны display:none.
Но нет никакого значения, которое является прямым обратным знаком display:none - точно так же, как нет ни одного стиля волос, противоположного "лысым".
Истинная противоположность display: none не существует (пока).
Но display: unset очень близок и работает в большинстве случаев.
Из MDN (Mozilla Developer Network):
Ключевое слово unset CSS - это сочетание начальных и наследуемых ключевых слов. Подобно этим двум другим ключевым словам в CSS, его можно применять к любому свойству CSS, включая сокращенную CSS. Это ключевое слово сбрасывает свойство до унаследованного значения, если оно наследуется от его родителя или его начального значения, если нет. Другими словами, он ведет себя как ключевое слово inherit в первом случае и подобно начальному ключевому слову во втором случае.
(источник: https://developer.mozilla.org/docs/Web/CSS/unset)
Обратите внимание также, что display: revert в настоящее время разрабатывается. Подробнее см. MDN.
При изменении элемента display в Javascript во многих случаях подходящей опцией "отменить" результат element.style.display = "none" является element.style.display = "". Это удаляет объявление display из атрибута style, возвращая фактическое значение свойства display к значению, установленному в таблице стилей для документа (для браузера по умолчанию, если не переопределено в другом месте). Но более надежным подходом является наличие класса в CSS, например
.invisible { display: none; }
и добавление/удаление этого имени класса в/из element.className.
вы можете использовать
display: normal;
Он работает нормально... Его небольшой взлом в css;)
Как объясняет Павел, нет буквальной противоположности отображения: нет в HTML, поскольку каждый элемент имеет другой дисплей по умолчанию, и вы также можете изменить отображение с помощью класса или встроенного стиля и т.д.
Однако, если вы используете что-то вроде jQuery, их функции show и hide ведут себя так, как если бы была противоположность отображения none. Когда вы скрываете, а затем снова показываете элемент, он будет отображаться точно так же, как это было до его скрытия. Они делают это, сохраняя старое значение свойства отображения при скрытии элемента, так что, когда вы его снова показываете, он будет отображаться таким же образом, как это было до того, как вы спрятали его. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180
Это означает, что если вы установите div, например, для отображения встроенного или встроенного блока, и вы его спрячете, а затем снова отобразите его, он снова будет отображаться как встроенный или встроенный блок отображения так же, как и до
<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>
script:
$('a').click(function(){
$('div').toggle();
});
Обратите внимание, что свойство отображения div останется постоянным даже после его скрытия (display: none) и будет показано снова.
Я использую
display:block;
Это работает для меня
В случае дружественной к принтеру таблицы стилей я использую следующее:
/* 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 при обновлении полей, но это не было необходимо в моем случае. Возможно, это не самое элегантное решение, но это сработало для меня!
Лучший ответ для display: none -
display:inline
или
display:normal
Вы можете использовать этот display:block;, а также добавить overflow:hidden;
видимость: скрытая спрячет элемент, а элемент - с DOM. И в случае отображения: ни один из них не удалит элемент из DOM.
Таким образом, у вас есть опция для элемента, который можно скрыть или показать. Но как только вы удаляете его (я имею в виду отображение none), он не имеет четкого противоположного значения. дисплей имеет несколько значений, например display: block, display: inline, display: inline-block и многие другие. вы можете проверить это из W3C.
Лучшим "противоположным" было бы вернуть его к значению по умолчанию, которое равно:
display: inline