Есть ли противоположность для отображения: нет?

Противоположностью 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):

Неустановленное ключевое слово CSS - это комбинация начальных и наследуемых ключевых слов. Как и эти два других ключевых слова в формате CSS, его можно применять к любому свойству CSS, включая сокращение CSS all. Это ключевое слово сбрасывает свойство к его унаследованному значению, если оно наследует от своего родителя, или к его начальному значению, если нет. Другими словами, он ведет себя как ключевое слово наследования в первом случае и как начальное ключевое слово во втором случае.

(источник: 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;)

Я использую display:block; Это работает для меня

Как объясняет Пол, здесь нет буквальной противоположности отображению: нет в HTML, так как каждый элемент имеет различное отображение по умолчанию, и вы также можете изменить отображение с помощью класса или встроенного стиля и т. Д.

Однако, если вы используете что-то вроде jQuery, их функции показа и скрытия ведут себя так, как если бы была противоположность показа none. Когда вы прячете, а затем снова показываете элемент, он будет отображаться точно так же, как и до того, как был скрыт. Они делают это, сохраняя старое значение свойства display при скрытии элемента, чтобы при повторном его отображении он отображался так же, как и до того, как вы его спрятали. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Это означает, что если вы установите div, например, для отображения inline, или inline-block, и вы скрываете его, а затем снова показываете, он снова будет отображаться как 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 при обновлении полей, но в моем случае в этом не было необходимости. Возможно, не самое элегантное решение, но оно сработало для меня!

Вы можете использовать дисплей: блок

Пример :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

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

Первоначально я настроил его как display: none, но затем display: inline-block для тех пользователей, которым я хотел его видеть, но у меня возникли проблемы с форматированием, которые вы могли ожидать (объединение столбцов или вообще беспорядок).

Я решил, что сначала нужно показать таблицу, а затем сделать «display: none» для тех пользователей, которых я не хотел видеть. Таким образом, он отформатировал нормально, но затем исчез при необходимости.

Боковое решение, но может кому-то помочь!

противоположность «none» - это «flex» при работе с реагировать на нативный.

visibility: hidden скрывает элемент, но элемент их с DOM. И в случае отображения: ни один это удалит элемент из DOM.

Таким образом, у вас есть возможность для элемента, чтобы скрыть или показать. Но как только вы удалите его (я имею в виду не отображать), у него не будет четкого противоположного значения. display имеет несколько значений, таких как display: block, display: inline, display: inline-block и многие другие. Вы можете проверить это из W3C.

Лучший ответ на display: noneэто

display:inline

или

display:normal

Вы можете использовать это, display:block;а также добавитьoverflow:hidden;

Лучшая «противоположность» - вернуть значение по умолчанию:

display: inline