Comment rendre un DIV visible et invisible avec JavaScript

Question

Pouvez-vous faire quelque chose comme

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

Answer 1

Si [DIV] est un élément, alors

[DIV].style.visibility='visible'

OU

[DIV].style.visibility='hidden'

Answer 2

Supposons que vous n'utilisiez 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 la fonction var elem = document.getElementById('id');

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

Réglage de style.display donnera l'impression que l'élément n'est pas présent du tout ("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.visibility fera en sorte que le div soit toujours là, mais soit "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, à condition de définir l'attribut display propriété :

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

Il utilisera automatiquement l'option display vous n'avez pas à vous soucier du type d'élément (inline ou block). De plus, elem peut être non seulement un élément du DOM mais aussi un sélecteur tel que #id ou .class ou tout ce qui est valide en CSS3 (et plus encore !).

Answer 3

Vous pouvez utiliser visibility ou display mais vous devez appliquer les changements à la div.style et non l'objet div l'objet 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';

Answer 4

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

Fonctions setAttribute et removeAttribute

Une vue rapide :

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

Answer 5

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

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