Czy jest coś przeciwnego do wyświetlenia: brak?

Przeciwieństwem visibility: hiddenjest visibility: visible. Podobnie jest coś przeciwnegodisplay: none ?

Wiele osób wprawia w zakłopotanie zastanawianie się, jak pokazać element, gdy już jest display: none, ponieważ nie jest to tak jasne, jak użycie visibilitywłaściwości.

Mógłbym po prostu użyć visibility: hiddenzamiast display: none, ale to nie daje tego samego efektu, więc nie zamierzam z tym.

display: nonenie ma dosłownego przeciwieństwa jak visibility:hiddenma.

visibilityWłasność decyduje, czy dany element jest widoczny, czy nie. Dlatego ma dwa stany (visible i hidden), które są sobie przeciwne.

displayNieruchomość jednak decyduje, jakie przepisy układu elementem będzie. Istnieje kilka różnych rodzajów reguł dla jak elementy będą układać się w CSS, więc istnieje kilka różnych wartości ( block, inline, inline-blockitd - patrz dokumentacja dla tych wartości tutaj ).

display:none usuwa element z układu strony całkowicie, jakby go nie było.

Wszystkie inne wartości displaypowodują, że element jest częścią strony, więc w pewnym sensie wszystkie są przeciwne display:none.

Ale nie ma jednej wartości, która jest bezpośrednią odwrotnością display:none- tak jak nie ma jednej fryzury, która byłaby przeciwieństwem „łysiny”.

Prawdziwe przeciwieństwo display: nonenie ma (jeszcze).

Ale display: unsetjest bardzo blisko i działa w większości przypadków.

Z MDN (Mozilla Developer Network):

Nieustawione słowo kluczowe CSS jest kombinacją słów kluczowych początkowych i dziedziczonych. Podobnie jak dwa inne słowa kluczowe w całym CSS, można go zastosować do dowolnej właściwości CSS, w tym do skrótu CSS wszystkich. To słowo kluczowe resetuje właściwość do wartości odziedziczonej, jeśli dziedziczy po rodzicu lub do wartości początkowej, jeśli nie. Innymi słowy, zachowuje się jak słowo kluczowe dziedziczące w pierwszym przypadku i jak początkowe słowo kluczowe w drugim przypadku.

(źródło: https://developer.mozilla.org/docs/Web/CSS/unset )

Należy również zauważyć, że display: revertjest obecnie opracowywany. Szczegóły w MDN .

Przy zmianie elementu displayw JavaScript, w wielu przypadkach odpowiednia opcja do „cofania” wynikiem element.style.display = "none"jest element.style.display = "". Spowoduje to usunięcie displaydeklaracji z styleatrybutu, przywracając rzeczywistą wartość displaywłaściwości do wartości ustawionej w arkuszu stylów dla dokumentu (do domyślnej przeglądarki, jeśli nie zostanie zdefiniowana w innym miejscu). Ale bardziej niezawodnym podejściem jest posiadanie klasy w stylu CSS

.invisible { display: none; }

i dodawanie / usuwanie tej nazwy klasy do / z element.className.

możesz użyć

display: normal;

Działa normalnie .... Jest to małe hackowanie w css;)

Używam display:block; To działa dla mnie

Jak wyjaśnia Paul, nie ma dosłownego przeciwieństwa wyświetlania: żaden w HTML, ponieważ każdy element ma inny domyślny sposób wyświetlania, a także można zmienić sposób wyświetlania za pomocą klasy lub stylu wbudowanego itp.

Jednak jeśli użyjesz czegoś takiego jak jQuery, ich funkcje show i hide zachowują się tak, jakby nie istniało przeciwieństwo wyświetlania none. Gdy się ukryjesz, a następnie ponownie wyświetlisz element, wyświetli się dokładnie w taki sam sposób, jak przed ukrywaniem. Robią to, przechowując starą wartość właściwości display podczas ukrywania elementu, aby po ponownym wyświetleniu wyświetlał się w taki sam sposób, jak przed ukrywaniem. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Oznacza to, że jeśli ustawisz na przykład div, aby wyświetlał się w tekście lub w wierszu, i ukryjesz go, a następnie pokażesz ponownie, będzie on ponownie wyświetlany jako wyświetlany w wierszu lub w wierszu tak, jak poprzednio

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

scenariusz:

  $('a').click(function(){
        $('div').toggle();
    });

Zauważ, że właściwość display div pozostanie stała nawet po jej ukryciu (display: none) i wyświetleniu ponownie.

W przypadku arkusza stylów przyjaznego dla drukarki używam:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

Użyłem tego, gdy potrzebowałem wydrukować formularz zawierający wartości, a pola wejściowe były trudne do wydrukowania. Dodałem więc wartości zawinięte w tag span.print_only (div.print_only użyto gdzie indziej), a następnie zastosowałem klasę .no_print do pól wejściowych. Tak więc na ekranie zobaczysz pola wprowadzania, a po wydrukowaniu tylko wartości. Jeśli chcesz się zachwycić, możesz użyć JS do aktualizacji wartości w znacznikach span, gdy pola zostały zaktualizowane, ale w moim przypadku nie było to konieczne. Być może nie jest to najbardziej eleganckie rozwiązanie, ale zadziałało dla mnie!

Możesz użyć display: block

Przykład:

<!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> 

Zetknąłem się z tym wyzwaniem, budując aplikację, w której chciałem ukryć tabelę dla niektórych użytkowników, ale nie dla innych.

Początkowo ustawiłem go jako display: none ale display: inline-block dla tych użytkowników, których chciałem zobaczyć, ale wystąpiły problemy z formatowaniem, których można się spodziewać (konsolidacja kolumn lub ogólnie bałagan).

W ten sposób obejrzałem najpierw tabelę, a następnie „wyświetl: brak” dla użytkowników, których nie chciałem widzieć. W ten sposób sformatował się normalnie, ale potem zniknął w razie potrzeby.

Trochę rozwiązania bocznego, ale może komuś pomóc!

przeciwieństwo „none” to „flex” podczas pracy z React Native.

widoczność: ukryty ukryje element, ale element należy do DOM. A w przypadku wyświetlania: brak usunie element z DOM.

Możesz więc ukryć lub odkryć element. Ale kiedy go usuniesz (mam na myśli brak wyświetlania), nie ma wyraźnej przeciwnej wartości. display ma kilka wartości, takich jak display: block, display: inline, display: inline-block i wiele innych. możesz to sprawdzić w W3C.

Najlepsza odpowiedź na display: noneto

display:inline

lub

display:normal

Możesz użyć tego, display:block;a także dodaćoverflow:hidden;

Najlepszym „przeciwieństwem” byłoby przywrócenie wartości domyślnej, która wynosi:

display: inline