Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Sauvegarder le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> .imgbox { flottant: gauche; text-align: center; largeur: 120px; bordure: 1px solide gris; marge: 4px; padding: 6px; } button { largeur: 100%; } </style> </head> <body> <h2>Différence entre display:none et visibility: hidden</h2> <p><strong>visibilité:hidden</strong>cache l'élément, mais il occupe toujours de l'espace dans la mise en page.</p> <p><strong>afficher:none</strong>supprime l'élément du document. Il ne prend pas de place.</p> <div class="imgbox" id="imgbox1">Boîte 1<br> <img src="img_5terre.jpg" alt="Italy" style="width:100%"> <button onclick="removeElement()">Supprimer</button> </div> <div class="imgbox" id="imgbox2">Boîte 2<br> <img src="img_lights.jpg" alt="Lights" style="width:100%"> <button onclick="changeVisibility()">Cacher</button> </div> <div class="imgbox">Boîte 3<br> <img src="img_forest.jpg" alt="Forest" style="width:100%"> <button onclick="resetElement()">Réinitialiser tout</button> </div> <script> function removeElement() { document.getElementById("imgbox1").style.display = "none"; } function changeVisibility() { document.getElementById("imgbox2").style.visibility = "hidden"; } function resetElement() { document.getElementById("imgbox1").style.display = "block"; document.getElementById("imgbox2").style.visibility = "visible"; } </script> </body> </html>