C'è un contrario da mostrare: nessuno?

L'opposto di visibility: hiddenè visibility: visible. Allo stesso modo, c'è qualche contrario per display: none?

Molte persone si confondono nel capire come mostrare un elemento quando ha display: none, dal momento che non è chiaro come usare la visibilityproprietà.

Potrei semplicemente usare visibility: hiddeninvece di display: none, ma non dà lo stesso effetto, quindi non ci andrò.

display: nonenon ha un contrario letterale come visibility:hiddenfa.

La visibilityproprietà decide se un elemento è visibile o meno. Ha quindi due stati ( visiblee hidden), che sono opposti l'uno all'altro.

La displayproprietà, tuttavia, decide quali regole di layout seguiranno gli elementi. Ci sono diversi tipi di regole per come gli elementi imporranno se stessi in CSS, quindi ci sono diversi valori ( block, inline, inline-blockecc - vedere la documentazione per questi valori qui ).

display:none rimuove completamente un elemento dal layout di pagina, come se non fosse presente.

Tutti gli altri valori per fanno displaysì che l'elemento faccia parte della pagina, quindi in un certo senso sono tutti opposti display:none.

Ma non c'è un valore che sia il contrario diretto di display:none- proprio come non esiste uno stile di capelli che sia l'opposto di "calvo".

Un vero contrario display: nonenon esiste (ancora).

Ma display: unsetè molto vicino e funziona nella maggior parte dei casi.

Da MDN (Mozilla Developer Network):

La parola chiave CSS non impostata è la combinazione delle parole chiave iniziali ed ereditate. Come queste altre due parole chiave a livello CSS, può essere applicata a qualsiasi proprietà CSS, inclusa la stenografia CSS all. Questa parola chiave reimposta la proprietà al suo valore ereditato se eredita dal suo genitore o al suo valore iniziale in caso contrario. In altre parole, si comporta come la parola chiave eredita nel primo caso e come la parola chiave iniziale nel secondo caso.

(fonte: https://developer.mozilla.org/docs/Web/CSS/unset )

Si noti inoltre che display: revertè attualmente in fase di sviluppo. Vedi MDN per i dettagli.

Quando si modifica l'elemento displayin Javascript, in molti casi un'opzione adatta per "annullare" il risultato element.style.display = "none"è element.style.display = "". Ciò rimuove la displaydichiarazione dall'attributo style, ripristinando il valore effettivo della displayproprietà sul valore impostato nel foglio di stile per il documento (per impostazione predefinita del browser se non ridefinito altrove). Ma l'approccio più affidabile è quello di avere una classe come CSS

.invisible { display: none; }

e aggiungendo / rimuovendo questo nome di classe a / da element.className.

Puoi usare

display: normal;

Funziona normalmente .... È un piccolo hacking in CSS;)

Uso display:block; Funziona per me

Come spiega Paul, non c'è letteralmente l'opposto di display: nessuno in HTML poiché ogni elemento ha un display predefinito diverso e puoi anche cambiare il display con uno stile di classe o inline ecc.

Tuttavia, se usi qualcosa come jQuery, le loro funzioni show e hide si comportano come se non ci fosse un contrario di display none. Quando si nasconde, quindi mostra di nuovo un elemento, verrà visualizzato esattamente nello stesso modo in cui era prima di essere nascosto. Lo fanno memorizzando il vecchio valore della proprietà display sul nascondersi dell'elemento in modo che quando lo mostri di nuovo verrà visualizzato nello stesso modo in cui lo hai nascosto prima di nasconderlo. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Ciò significa che se si imposta un div, ad esempio, per visualizzare inline, o inline-block e nasconderlo e quindi mostrarlo di nuovo, verrà nuovamente mostrato come display inline o inline-block come era prima

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

Si noti che la proprietà di visualizzazione del div rimarrà costante anche dopo che è stata nascosta (display: nessuna) e mostrata di nuovo.

Nel caso di un foglio di stile intuitivo, utilizzo quanto segue:

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

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

L'ho usato quando avevo bisogno di stampare un modulo contenente valori e i campi di input erano difficili da stampare. Quindi ho aggiunto i valori racchiusi in un tag span.print_only (div.print_only era usato altrove) e quindi ho applicato la classe .no_print ai campi di input. Quindi sullo schermo vedresti i campi di input e quando vengono stampati, solo i valori. Se vuoi essere sofisticato, puoi usare JS per aggiornare i valori nei tag span quando i campi sono stati aggiornati, ma nel mio caso non era necessario. Forse non è la soluzione più elegante ma ha funzionato per me!

Puoi usare display: block

Esempio :

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

Mi sono imbattuto in questa sfida durante la creazione di un'app in cui volevo un tavolo nascosto per alcuni utenti ma non per altri.

Inizialmente l'ho impostato come display: none ma poi display: inline-block per quegli utenti che volevo vederlo ma ho riscontrato i problemi di formattazione che potresti aspettarti (colonne consolidate o generalmente disordinate).

Il modo in cui ho lavorato è stato quello di mostrare prima la tabella e poi fare "display: none" per quegli utenti che non volevo vederlo. In questo modo, è stato formattato normalmente ma poi è scomparso secondo necessità.

Un po 'di soluzione laterale ma potrebbe aiutare qualcuno!

l'opposto di "none" è "flex" mentre si lavora con reattivo nativo.

visibilità: nascosto nasconderà l'elemento ma l'elemento è loro con DOM. E in caso di visualizzazione: nessuna rimuoverà l'elemento dal DOM.

Quindi hai la possibilità di nascondere o mostrare l'elemento. Ma una volta eliminato (intendo visualizzarne nessuno) non ha più un valore opposto. display ha diversi valori come display: block, display: inline, display: inline-block e molti altri. puoi verificarlo dal W3C.

La migliore risposta display: noneè

display:inline

o

display:normal

Puoi usare questo display:block;e anche aggiungereoverflow:hidden;

Il "contrario" migliore sarebbe quello di riportarlo al valore predefinito che è:

display: inline