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
Avec du javascript
Références

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>

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