Exemple de comment cacher ou rendre visible une div avec du javascript:
Table des matières
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 |
