Comment cacher ou rendre visible une div avec du javascript ?

12 juin 2019    /    Viewed: 1760    /    Comments: 0    /    Edit


Exemple de comment cacher ou rendre visible une div avec du javascript:

Cacher ou rendre visible une div

Soit la page html suivante avec une div contenant une image gifimage

<!DOCTYPE html>
<html>
<body>

<div id="myDIV"'>
  <img src="busy-cursor-gif-8.gif">
</div>

</body>
</html>

Pour cacher cette div on peut ajouter style='display:none' comme ceci

<div id="myDIV" style='display:none'>
  <img src="busy-cursor-gif-8.gif">
</div>

ou la rendre visible

<div id="myDIV" style='display:block'>
  <img src="busy-cursor-gif-8.gif">
</div>

Avec du javascript

Maintenant avec du javascript on peut cacher ou rendre visible la div comme dans cet exemple:

<!DOCTYPE html>
<html>
<body>

<div id="myDIV">
  <img src="busy-cursor-gif-8.gif">
</div>

<script>

window.onload = function(){

var x = document.getElementById("myDIV");

x.setAttribute("style", "display:none");

}

</script>

</body>
</html>

ou

<!DOCTYPE html>
<html>
<body>

<div id="myDIV">
  <img src="busy-cursor-gif-8.gif">
</div>

<script>

window.onload = function(){

var x = document.getElementById("myDIV");

x.setAttribute("style", "display:block");

}

</script>

</body>
</html>

Exemple 2:

<!DOCTYPE html>
<html>
<body>

<div id="myDIV" style='display:none'>
  <img src="busy-cursor-gif-8.gif">
</div>

<script>

window.onload = function(){

    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }

}

</script>

</body>
</html>

Références

Liens Site
How TO - Toggle Hide and Show w3schools
gifimage gifimage
Hide an Element - display:none or visibility:hidden? w3schools


Card image cap
profile-image
Daidalos

Je développe le présent site avec le framework python Django. Je m'intéresse aussi actuellement dans le cadre de mon travail au machine learning pour plusieurs projets (voir par exemple) et toutes suggestions ou commentaires sont les bienvenus !