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 |