¿Hay un opuesto para mostrar: ninguno?

Lo contrario de visibility: hiddenes visibility: visible. Del mismo modo, ¿hay algún opuesto para display: none?

Muchas personas se confunden al descubrir cómo mostrar un elemento cuando lo tiene display: none, ya que no es tan claro como usar la visibilitypropiedad.

Simplemente podría usar en visibility: hiddenlugar de display: none, pero no tiene el mismo efecto, por lo que no voy con eso.

display: noneno tiene un opuesto literal como lo visibility:hiddenhace.

La visibilitypropiedad decide si un elemento es visible o no. Por lo tanto, tiene dos estados ( visibley hidden), que son opuestos entre sí.

La displaypropiedad, sin embargo, decide qué reglas de diseño un elemento seguirán. Hay varios tipos diferentes de reglas de cómo los elementos pondrán a sí mismos en CSS, por lo que hay varios valores diferentes ( block, inline, inline-blocketc. - consulte la documentación de estos valores aquí ).

display:none elimina un elemento del diseño de la página por completo, como si no estuviera allí.

Todos los demás valores de displayhacen que el elemento forme parte de la página, por lo que, en cierto sentido, todos son opuestos a display:none.

Pero no hay un valor que sea el inverso directo display:none, al igual que no hay un peinado que sea lo opuesto a "calvo".

Un verdadero opuesto a display: noneno existe (todavía).

Pero display: unsetestá muy cerca y funciona en la mayoría de los casos.

De MDN (Red de desarrolladores de Mozilla):

La palabra clave CSS no establecida es la combinación de las palabras clave iniciales y heredadas. Al igual que estas otras dos palabras clave de CSS, se puede aplicar a cualquier propiedad CSS, incluida la abreviatura CSS all. Esta palabra clave restablece la propiedad a su valor heredado si hereda de su padre o a su valor inicial si no. En otras palabras, se comporta como la palabra clave heredar en el primer caso y como la palabra clave inicial en el segundo caso.

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

Tenga en cuenta también que display: revertactualmente se está desarrollando. Ver MDN para más detalles.

Cuando se cambia el elemento de displayen Javascript, en muchos casos una opción adecuada para 'deshacer' el resultado de element.style.display = "none"es element.style.display = "". Esto elimina la displaydeclaración del styleatributo y revierte el valor real de la displaypropiedad al valor establecido en la hoja de estilo para el documento (al valor predeterminado del navegador si no se redefine en otro lugar). Pero el enfoque más confiable es tener una clase en CSS como

.invisible { display: none; }

y agregar / eliminar este nombre de clase a / de element.className.

puedes usar

display: normal;

Funciona como normal ... Es un pequeño pirateo en CSS;)

Yo uso display:block; funciona para mí

Como Paul explica, no hay un opuesto literal a la visualización: ninguno en HTML ya que cada elemento tiene una visualización predeterminada diferente y también puede cambiar la visualización con una clase o un estilo en línea, etc.

Sin embargo, si usa algo como jQuery, sus funciones show y hide se comportan como si hubiera un opuesto de display none. Cuando se oculta, y luego muestra un elemento nuevamente, se mostrará exactamente de la misma manera que lo hizo antes de estar oculto. Lo hacen almacenando el valor anterior de la propiedad de visualización al ocultar el elemento para que cuando lo muestre nuevamente se muestre de la misma manera que lo hizo antes de ocultarlo. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Esto significa que si configura un div, por ejemplo, para mostrar en línea, o bloque en línea y lo oculta y luego lo muestra de nuevo, se mostrará una vez más como pantalla en línea o en bloque en línea igual que antes

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

guión:

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

Observe que la propiedad de visualización del div permanecerá constante incluso después de que se ocultó (display: none) y se volvió a mostrar.

En el caso de una hoja de estilo para imprimir, utilizo lo siguiente:

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

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

Usé esto cuando necesitaba imprimir un formulario que contenía valores y los campos de entrada eran difíciles de imprimir. Entonces agregué los valores envueltos en una etiqueta span.print_only (div.print_only se usó en otro lugar) y luego apliqué la clase .no_print a los campos de entrada. Entonces, en la pantalla, verá los campos de entrada y, cuando se imprima, solo los valores. Si quisieras ponerte elegante, puedes usar JS para actualizar los valores en las etiquetas de extensión cuando se actualizaron los campos, pero eso no era necesario en mi caso. Quizás no sea la solución más elegante, ¡pero funcionó para mí!

Puedes usar display: block

Ejemplo:

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

Me encontré con este desafío al crear una aplicación donde quería una tabla oculta para ciertos usuarios pero no para otros.

Inicialmente lo configuré como display: none pero luego display: inline-block para aquellos usuarios que quería verlo, pero experimenté los problemas de formato que podría esperar (columnas consolidadas o generalmente desordenadas).

La forma en que lo resolví fue mostrar primero la tabla y luego hacer "display: none" para aquellos usuarios a los que no quería ver. De esta forma, se formateó normalmente pero luego desapareció según fuera necesario.

¡Una solución lateral, pero podría ayudar a alguien!

opuesto a 'none' es 'flex' mientras se trabaja con react native.

visibilidad: oculto ocultará el elemento pero el elemento está con DOM. Y en caso de visualización: ninguno eliminará el elemento del DOM.

Por lo tanto, tiene la opción de que el elemento se oculte o muestre. Pero una vez que lo elimina (quiero decir, no mostrar ninguno) no tiene un valor opuesto claro. display tiene varios valores como display: block, display: inline, display: inline-block y muchos otros. Puedes verlo desde W3C.

La mejor respuesta para display: nonees

display:inline

o

display:normal

Puedes usar esto display:block;y también agregaroverflow:hidden;

El mejor "opuesto" sería devolverlo al valor predeterminado que es:

display: inline