Comment rendre un DIV visible et invisible avec JavaScript

113

Pouvez-vous faire quelque chose comme

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

javascript html

— Neurone
source

1

Pourquoi ne pas simplement utiliser Jquery? .cacher() ?

— coderama

Est-ce que j'utiliserais cela pour le nom du div, donc si le div était nommé test, je le ferais test.hide()?

8

@JackStone: Non, c'est seulement si vous utilisez déjà la bibliothèque jQuery. Certaines personnes aiment simplement en faire la promotion sur chaque question JavaScript. Même si vous étiez, .hide()ne définit pas la visibilité. Il définit l'affichage.

6

@am pas je suis vous n'avez clairement pas compris que jQuery est vraiment génial et fait tout. (Source de l'image)

— Pekka

8

Pour quelque chose comme celui-ci, une bonne réponse devrait contenir à la fois une solution JS simple et une solution montrant l' avantage d'utiliser une bibliothèque - dans ce cas, ne pas avoir à gérer un bloc vs en ligne lors de l'utilisation displaypour afficher un élément.

— ThiefMaster

139

si [DIV] est un élément alors

[DIV].style.visibility='visible'

OU

[DIV].style.visibility='hidden'

— Ron Tornambe
source

16

visibilitya pour effet secondaire que l'espace occupé par l'élément reste réservé. C'est peut-être ce que le PO veut ou non

— Pekka

1

À l'endroit où il est dit [DIV], je taperais le nom de mon div, non?

20

Non, utilisez à la document.getElementById('id-of-the-div')place de[DIV]

— ThiefMaster

@JackStone: Cela dépend de ce que vous entendez par "nom" de votre div. Si c'est une variable qui fait référence au div, alors oui.

1

Donc, si ma div était un nom testdiv, ce serait le cas document.getElementById('testdiv').style.visibility = 'hidden';?

124

Supposons que vous n'utilisez pas une bibliothèque telle que jQuery.

Si vous n'avez pas encore de référence à l'élément DOM, obtenez-en une en utilisant var elem = document.getElementById('id');

Ensuite, vous pouvez définir n'importe quelle propriété CSS de cet élément. Pour afficher / masquer, vous pouvez utiliser deux propriétés: displayet visibility, qui ont des effets légèrement différents:

L'ajustement style.displaydonnera l'impression que l'élément n'est pas du tout présent ("supprimé").

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)

ou style.visibilityrendra le div toujours là, mais sera "tout vide" ou "tout blanc"

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

Si vous utilisez jQuery, vous pouvez le faire encore plus facilement tant que vous souhaitez définir la displaypropriété:

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

Il utilisera automatiquement la displayvaleur appropriée ; vous n'avez pas à vous soucier du type d'élément (en ligne ou en bloc). De plus, elempeut non seulement être un élément DOM, mais aussi un sélecteur tel que #idou .classou tout autre élément qui est valide CSS3 (et plus!).

— ThiefMaster
source

Je préfère votre réponse mais je suppose qu'il y a une petite correction que vous devez utiliser elem.style.display = 'none';

— Saumil

Parfois, il est acceptable d' attribuer une chaîne vide pour afficher un élément .

— Basilevs

29

Vous pouvez utiliser visibilityou, displaymais vous devez appliquer des modifications à l' div.styleobjet et non à l' divobjet lui-même.

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
source

div.style.visibility = falsene fonctionne pas pour moi dans Chrome. Et la truepartie semble fonctionner plus par accident car elle désactive la propriété (pas mon vote négatif cependant)

— Pekka

Ni displayne visibilitysont propriétés booléennes. En plus de cela, noneet blockdoivent être cités car ce sont des chaînes.

— ThiefMaster

mauvaises valeurs pour les étiquettes. Celles-ci fonctionnent maintenant et non, je ne vais pas jouer avec ça, c'est trop simpliste.

— zellio

4

Vous pouvez utiliser les fonctions DOM: setAttribute et removeAttribute. Dans le lien suivant, vous avez un exemple de leur utilisation.

Fonctions setAttribute et removeAttribute

Un aperçu rapide:

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

— jarh1992
source

2

Pouvez-vous améliorer votre réponse? Avec exemple et explications.

— Gaël Barbin

1

Vous pouvez utiliser opacityce qui est similaire à visibility mais permet de faciliter la transition et de contrôler d'autres paramètres tels que la hauteur (pour la simplicité de l'extrait de code, je mets directement la logique js en html - ne le faites pas dans le code de production)

Afficher l'extrait de code

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

Développer l'extrait

— Kamil Kiełczewski
source

0

Utilisez l'attribut 'hidden' de l'élément DOM:

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

— Andrey Hohutkin
source

0

Rendre invisible en utilisant CSS

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

Rendre visible avec Javascript

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

— Dilip Kumar Choudhary
source