¿Cómo se crea un div oculto que no crea un salto de línea o un espacio horizontal?


354

Quiero tener una casilla de verificación oculta que no ocupe espacio en la pantalla.

Si tengo esto:

<div id="divCheckbox" style="visibility: hidden">

No veo la casilla de verificación, pero aún así crea una nueva línea.

Si tengo esto:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

ya no crea una nueva línea, pero ocupa espacio horizontal en la pantalla.

¿Hay alguna manera de tener un div oculto que no ocupe espacio (vertical u horizontal?


¿Hay algún uso para tal div?
Jonno_FTW

66
@ Jonon: Se usa comúnmente en AJAX. Digamos que tiene una lista de artículos con triángulos de revelación. Desea que aparezcan detalles, o un subárbol, cuando el usuario hace clic en el triángulo de revelación. Entonces, lo que debe hacer es colocar un <div id = "theID" style = "display: none;"> donde deben ir los detalles. Luego, cuando el usuario hace clic en el triángulo, lo mueve a una posición "intermedia" (apuntando hacia el sureste) y dispara una solicitud AJAX para completar el <div>. Cuando finaliza la solicitud de AJAX, gira el triángulo hacia el sur y elimina "display: none;" del estilo del <div>. La biblioteca script.aculo.us hace esto mucho.
Mike DeSimone

Respuestas:


717

Utilizar display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden oculta el elemento, pero aún ocupa espacio en el diseño.

  • display: none elimina el elemento completamente del documento, no ocupa espacio.


42
para mostrar el div nuevamente (en caso de que alguien necesite como yo)<div id="divCheckbox" style="display: inline-block;">
anujin

14
@anujin: ¿Por qué inline-block? El displayvalor predeterminado para un div es block!
MMM

¿Hay alguna manera de hacer lo contrario? Para cambiar un div a partir display: nonede display: inline-blocko equivalente sin el div se muestra ahora ocupando espacio y moviendo mis otros elementos DOM alrededor?
bpromas

1
Podría valer la pena actualizar la respuesta para incluir el atributo HTML global oculto que está disponible desde HTML5.1, que es básicamente lo mismo que decir display: noneaunque directamente desde HTML. Sin embargo, cualquier uso de la displaypropiedad anula el comportamiento del hiddenatributo global.
Marius Mucenicu

54

Desde el lanzamiento de HTML5 uno ahora simplemente puede hacer:

<div hidden>This div is hidden</div>

Nota: Esto no es compatible con algunos navegadores antiguos, especialmente IE <11.

Documentación de atributos ocultos ( MDN , W3C )


1
Esto es más semánticamente correcto que esconderse con CSS, es mejor para la accesibilidad y es compatible con todos los principales navegadores. Debería ser la respuesta aceptada en 2020.
Robin Métral

29

Uso style="display: none;". Además, probablemente no necesite tener el DIV, solo establecer el estilo display: noneen la casilla de verificación probablemente sea suficiente.


Necesito ocultar mi mensaje de alerta al cargar la página y quería mostrarlo nuevamente al hacer clic en el botón. Intenté visibility: hiddenpero eso mostraba un espacio vacío. style="display: none;"funcionó como un pequeño encanto :)
sohaiby

8

Además de la respuesta de CMS, es posible que desee considerar colocar el estilo en una hoja de estilo externa y asignar el estilo al ID, de esta manera:

#divCheckbox {
display: none;
}

+1, esa es realmente una buena sugerencia, pero ¿cómo mostrar solo una casilla de verificación sin afectar la visibilidad de todas las demás casillas de verificación?
Owais Qureshi

1
@dotNetSoldier Antigua pregunta, pero debería haber una respuesta aquí. Tiene una clase css llamada invis y la agrega / elimina de la casilla de verificación o div por id usando JS.
DanielST

8

Dado que debe centrarse en la usabilidad y las generalidades en CSS, en lugar de usar una identificación para apuntar a un elemento de diseño específico (que da como resultado archivos css enormes o múltiples), probablemente debería usar una clase verdadera en su archivo .css vinculado:

.hidden {
visibility: hidden;
display: none;
}

o para el minimalista:

.hidden {
display: none;
}

Ahora puede simplemente aplicarlo a través de:

<div class="hidden"> content </div>

¡el código se ve mucho más limpio de esta manera! Prefiero tener una clase sobre el estilo en línea
Harry Cho

5

Considere usar <span>para aislar pequeños segmentos de marcado para diseñar sin romper el diseño. Esto parecería ser más idiomático que intentar forzar a que <div>no se muestre, si de hecho la casilla de verificación en sí no se puede diseñar de la manera que desea.


4

Mostrar / ocultar haciendo clic con el mouse:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Fuente: aquí


4

Para evitar que la casilla de verificación ocupe espacio sin eliminarlo del DOM, use hidden.

<div hidden id="divCheckbox">

Para evitar que la casilla de verificación ocupe cualquier espacio y también lo elimine del DOM, use display: none.

<div id="divCheckbox" style="display:none">

3

Para ocultar el elemento visualmente , pero mantenerlo en el html, puede usar:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

o

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

¿Qué puede salir mal display:none? Elimina el elemento completamente del html, por lo que algunas funcionalidades pueden romperse si necesitan acceder a algo en el elemento oculto.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.