web-dev-qa-db-fra.com

Comment rendre une DIV visible et invisible avec JavaScript

Pouvez-vous faire quelque chose comme

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

si [DIV] est un élément alors 

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden'
114
ron tornambe

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

Si vous n'avez pas déjà une 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: display et visibility, qui ont des effets légèrement différents:

Ajuster style.display donnera l’impression que l’élément n’est pas présent du tout ("enlevé").

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 que la div sera 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 si vous souhaitez définir la propriété display:

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

Il utilisera automatiquement la valeur display appropriée; vous n'avez pas à vous soucier du type d'élément (inline ou block). De plus, elem peut non seulement être un élément DOM, mais également un sélecteur tel que #id ou .class ou tout autre élément valide CSS3 (et plus!).

108
ThiefMaster

Vous pouvez utiliser visibility ou display mais vous devez appliquer les modifications à l'objet div.style et non à l'objet div.

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';
24
zellio

Vous pouvez utiliser les fonctions DOM: setAttribute et removeAttribute . Dans le lien suivant, vous trouverez un exemple d'utilisation.

setAttribute et removeAttribute fonctions

Un aperçu rapide:

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

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

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

Votre fonction showDiv() peut ressembler à ceci (je change son nom en un nom plus universel):

function show(element, hide = false) {
    element.style.visibility = hide ? 'hidden' : 'visible';    
}

Et utilisez-le comme suit (le ".test" doit valider sélecteur CSS pour votre DIV)

let div = document.querySelector(".test");
show(div, true);

Voici exemple de travail .

0
Kamil Kiełczewski