228 votos

¿Existe algún opuesto a display:none?

El opuesto de visibility: hidden es visibility: visible. ¿Hay algún opuesto para display: none?

Muchas personas se confunden al tratar de mostrar un elemento cuando tiene display: none, ya que no es tan claro como usar la propiedad visibility.

Podría simplemente usar visibility: hidden en lugar de display: none, pero no da el mismo efecto, así que no voy con eso.

11 votos

¿Por qué molestarte en hacer una pregunta si tu respuesta es copiar/pegar una tabla de w3schools.com/cssref/pr_class_display.asp?

0 votos

@mathheadinclouds, no creo que la respuesta de Ilya proporcione un opuesto a 'display: none'. Claro que nos da un truco, pero la pregunta es sobre tener una analogía como visible -> hidden y ? -> none.

1 votos

Bueno, podrías haber preguntado "¿cómo deshacer el efecto de mostrar:ninguno" - entonces, el método de Ilya sería una respuesta precisa. En esencia, pediste algún mostrar: ?algo?, tal que ese ?algo? deshaga el efecto de mostrar: ninguno (que, yo podría llamar opuesto). Claro, ese ?algo? no existe. Por lo tanto, no hay opuesto. Correcto, no tiene sentido discutir eso, eso no está en disputa. Pero PUEDES deshacer el efecto, si usas el método de Ilya. Entonces, en un sentido más amplio, es un opuesto. Es solo que no hay un opuesto de "una palabra".

204voto

Paul D. Waite Puntos 35456

display: none no tiene un opuesto literal como lo hace visibility:hidden.

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

Por otro lado, la propiedad display decide qué reglas de diseño seguirá un elemento. Hay varios tipos diferentes de reglas para cómo los elementos se colocarán en CSS, por lo que hay varios valores diferentes (block, inline, inline-block etc — ver la documentación de estos valores aquí).

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

Todos los demás valores de display hacen que el elemento sea 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 converso directo de display:none - así como no hay un peinado que sea lo opuesto a "calvo".

2 votos

Me di cuenta de que mencionaste display: initial en la respuesta propia eliminada, para los navegadores que implementan CSS2.1 es sinónimo de display: inline. No restablece display al valor predeterminado del navegador para un elemento dado; eso no es lo que significa "valor inicial".

0 votos

Si eres calvo por elección, cuando dejes de afeitarte, tu cabello volverá a crecer rizado y negro si así era antes de que te afeitaras. ;-) Estoy de acuerdo con este comentario, que 'display está demasiado sobrecargado' y CSS debería habernos dado propiedades separadas para el flujo (bloque o en línea), diseño interno (flex, cuadrícula, etc.) y visibilidad (visible, invisible, ninguno/oculto). Aunque separar flujo y diseño interno ahora es posible, anular display: none todavía es un dolor.

97voto

RockPaperLizard Puntos 1057

No existe un verdadero opuesto a display: none (aún).

Pero display: unset es muy cercano y funciona en la mayoría de los casos.

Desde MDN (Mozilla Developer Network):

La palabra clave CSS unset es la combinación de las palabras clave initial e inherit. Al igual que estas otras dos palabras clave CSS globales, se puede aplicar a cualquier propiedad CSS, incluyendo el shorthand 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 inherit en el primer caso y como la palabra clave initial en el segundo caso.

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

También ten en cuenta que display: revert actualmente está en desarrollo. Consulta MDN para más detalles.

0 votos

¿Qué pasa con display: initial?

0 votos

@Flimm No, display: inicial equivale a revertir a display: en línea, lo cual no deseas si anteriormente tenías un elemento con display: bloque por defecto.

36voto

Ilya Streltsyn Puntos 3857

Cuando se cambia la propiedad display de un elemento en Javascript, en muchos casos una opción adecuada para 'deshacer' el resultado de element.style.display = "none" es element.style.display = "". Esto elimina la declaración de display del atributo style, revirtiendo el valor real de la propiedad display al valor establecido en la hoja de estilos del documento (al valor predeterminado del navegador si no se redefinió en otro lugar). Pero el enfoque más confiable es tener una clase en CSS como

.invisible { display: none; }

y agregar/quitar este nombre de clase a/from element.className.

2 votos

Si quieres anular .element { display: none } (definido en la biblioteca CSS, por ejemplo) con .element { display: '' !important } no funcionará. Debes usar .element { display: unset !important }

2 votos

Hablé sobre "deshacer" display:none en JavaScript únicamente. Por supuesto, la cadena vacía no funcionará en CSS, ya que es un valor inválido. Sin embargo, la sugerencia de display: unset no restaurará, por ejemplo, el valor predeterminado display:block para un

o el valor predeterminado display:table-row para un , de hecho convierte todo en display:inline (al igual que display:initial). Para restaurar el valor predeterminado del navegador para el elemento, existe display:revert, pero no está bien soportado (caniuse.com/#feat=css-revert-value).

4voto

indera Puntos 73

Puedes usar

display: normal;

Funciona como normal.... Es un pequeño truco en css ;)

2 votos

¿Por qué se está votando negativamente esto? ¿Es una mala forma de hacerlo o? Funciona bien para las filas de la tabla, ¿pero debería usar algo más?

6 votos

El valor 'normal' no es un valor válido para la propiedad display, por lo que simplemente se ignora y funciona efectivamente como una asignación de element.style.display = '' (ver mi respuesta anterior).

35 votos

Entonces en otras palabras podrías haber usado display: bloque de Norris; para el mismo efecto, con un poco más de potencia.

4voto

user3589536 Puntos 204

Como explica Paul, no hay un opuesto literal de display: none en HTML ya que cada elemento tiene una pantalla predeterminada diferente y también puedes cambiar la pantalla con una clase o estilo en línea, etc.

Sin embargo, si usas algo como jQuery, sus funciones show y hide se comportan como si hubiera un opuesto de display none. Cuando ocultas y luego muestras un elemento nuevamente, se mostrará exactamente de la misma manera que lo hacía antes de ser ocultado. Lo hacen almacenando el valor antiguo de la propiedad de display al ocultar el elemento para que cuando lo muestres nuevamente se muestre de la misma manera que lo hacía antes de ocultarlo. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Esto significa que si defines un div, por ejemplo, como display inline o inline-block y lo ocultas y luego lo muestras nuevamente, una vez más se mostrará como display inline o inline-block, tal como estaba antes

hello
hello2
hello3

script:

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

Observa que la propiedad de display del div permanecerá constante incluso después de que se haya ocultado (display: none) y mostrado nuevamente.

1 votos

"display:table-cell" era el que necesitaba. No fue mencionado en ninguna otra respuesta.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X