Чи є протилежне відображенню: жодне?

Протилежність visibility: hiddenIS 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. Це ключове слово скидає властивість до його успадкованого значення, якщо воно успадковує від свого батьківського або його початкове значення, якщо ні. Іншими словами, він поводиться як ключове слово у спадок у першому випадку, так і як початкове ключове слово у другому випадку.

(джерело: 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, їх функції показу та приховування ведуть себе так, ніби не було протилежної відображення жодної. Коли ви ховаєте, а потім знову показуєте елемент, він відображатиметься точно таким же чином, як і раніше. Вони роблять це, зберігаючи старе значення властивості відображення при приховуванні елемента, так що коли ви його знову покажете, воно відображатиметься так само, як це було зроблено до того, як ви його сховали. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Це означає, що якщо ви встановите діб, наприклад, для відображення вбудованого чи вбудованого блоку, і приховати його, а потім показати його ще раз, він знову відобразиться як відображення вбудованого чи вбудованого блоку, як і раніше

<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();
    });

Зауважте, що властивість відображення 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, коли поля оновлювались, але це не було необхідним у моєму випадку. Можливо, не найелегантніше рішення, але воно працювало для мене!

Ви можете використовувати display: block

Приклад:

<!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" для тих користувачів, які я не хотів її бачити. Таким чином, він форматувався нормально, але потім зникав у міру необхідності.

Трохи бічного рішення, але може допомогти комусь!

навпаки "жоден" є "гнучким" під час роботи з рідними реагуючими.

видимість: прихований приховає елемент, але елемент - їх з DOM. І у випадку відображення: жоден він не видалить елемент з DOM.

Таким чином, у вас є можливість елемента або приховати, або приховати. Але як тільки ви видалите його (я маю на увазі відображення жодного), воно не має чіткого протилежного значення. дисплей має декілька значень, як дисплей: блок, дисплей: вбудований, дисплей: вбудований блок та багато інших. ви можете перевірити це у W3C.

Найкраща відповідь - display: noneце

display:inline

або

display:normal

Ви можете використовувати це, display:block;а також додатиoverflow:hidden;

Кращим "протилежним" було б повернути його до значення за замовчуванням, яке є:

display: inline