Cómo hacer que un DIV sea visible e invisible con JavaScript

113

Puedes hacer algo como

function showDiv()
{
    [DIV].visible = true;
    //or something
}

javascript html

— Neurona
fuente

1

¿Por qué no usar Jquery? .esconder() ?

— coderama

¿Usaría eso para el nombre del div, así que si el div se llamara prueba, lo haría test.hide()?

8

@JackStone: No, eso es solo si ya está usando la biblioteca jQuery. A algunas personas les gusta promocionarlo en cada pregunta de JavaScript. Incluso si lo fuera, .hide()no establece visibilidad. Establece la pantalla.

6

@am not i am, claramente no entendiste que jQuery es realmente genial y hace todas las cosas. (Fuente de la imagen)

— Pekka

8

Para algo como esto, una buena respuesta debe contener tanto una solución JS simple como una que muestre la ventaja de usar una biblioteca; en este caso, no tener que lidiar con inline vs block cuando se usa displaypara mostrar un elemento.

— ThiefMaster

139

si [DIV] es un elemento, entonces

[DIV].style.visibility='visible'

O

[DIV].style.visibility='hidden'

— ron tornambe
fuente

16

visibilitytiene el efecto secundario de que el espacio ocupado por el elemento queda reservado. Eso puede ser o no lo que quiere el OP

— Pekka

1

En el lugar donde dice [DIV], escribiría el nombre de mi div, ¿verdad?

20

No, use en document.getElementById('id-of-the-div')lugar de[DIV]

— ThiefMaster

@JackStone: Depende de lo que quieras decir con el "nombre" de tu div. Si es una variable que hace referencia al div, entonces sí.

1

Entonces, si mi div fuera el nombre testdiv, ¿lo sería document.getElementById('testdiv').style.visibility = 'hidden';?

124

Supongamos que no usa una biblioteca como jQuery.

Si aún no tiene una referencia al elemento DOM, obtenga una usando var elem = document.getElementById('id');

Luego, puede establecer cualquier propiedad CSS de ese elemento. Para mostrar / ocultar, puede usar dos propiedades: displayy visibility, que tienen efectos ligeramente diferentes:

El ajuste style.displayse verá como si el elemento no estuviera presente en absoluto ("eliminado").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

o style.visibilityhará que el div todavía esté allí, pero esté "todo vacío" o "todo blanco"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Si está utilizando jQuery, puede hacerlo aún más fácil siempre que desee establecer la displaypropiedad:

$(elem).hide();
$(elem).show();

Utilizará automáticamente el displayvalor apropiado ; no tiene que preocuparse por el tipo de elemento (en línea o bloque). Además, elemno sólo puede ser un elemento DOM sino también un selector como #ido .class, o cualquier otra cosa que es válido CSS 3 (y más!).

— ThiefMaster
fuente

Prefiero tu respuesta, pero supongo que hay una pequeña corrección que debes usar elem.style.display = 'none';

— Saumil

A veces es aceptable asignar una cadena vacía para mostrar un elemento .

— Basilevs

29

Puede usar visibilityo, displaypero debe aplicar cambios al div.styleobjeto y no al divobjeto en sí.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

— zellio
fuente

div.style.visibility = falseno me funciona en Chrome. Y la truepieza parece estar funcionando más por accidente porque desarma la propiedad (aunque no es mi voto negativo)

— Pekka

Ni displaytampoco visibilitylas propiedades booleanas. Además de eso, noney es blocknecesario

— citarlo

valores incorrectos para las etiquetas. Esos funcionan ahora y no, no voy a jugar con esto, es demasiado simplista.

— zellio

4

Puede utilizar las funciones DOM: setAttribute y removeAttribute. En el siguiente enlace tienes un ejemplo de cómo utilizarlos.

funciones setAttribute y removeAttribute

Una vista rápida:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

— jarh1992
fuente

2

¿Puedes mejorar tu respuesta? Con ejemplo y explicaciones.

— Gaël Barbin

1

Puede usar lo opacityque es similar visibility pero permite una transición suave y controlar otros parámetros como la altura (para simplificar el fragmento, puse la lógica js en html directamente, no lo haga en el código de producción)

Mostrar fragmento de código

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Expandir fragmento

— Kamil Kiełczewski
fuente

0

Utilice el atributo 'oculto' del elemento DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

— Andrey Hohutkin
fuente

0

Hacer invisible usando CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Hacer visible usando Javascript

document.getElementById('div_id').style.visibility = 'visible';

— Dilip Kumar Choudhary
fuente