Script sibling : Manipulation des 駘駑ents fr鑽es et parent avec nextElementS
Edition 2 | Chapitre 12 : Manipuler le document / Page 183
Edition 3 | Chapitre 12 : Manipuler le document / Page 183
Exécution du script
Emulation de la console
Code source
<html><head> <title>Manipulation des éléments frères et parent</title> </head><body> <h1>Manipulation des éléments frères et parent avec <code>nextElementSibling</code>, <code>previousElementSibling</code> et <code>parentElement</code></h1> <div id="container"> <div class="enfant">Enfant 1</div> <div class="enfant">Enfant 2</div> <div class="enfant">Enfant 3</div> <div class="enfant">Enfant 4</div> <div class="enfant">Enfant 5</div> <div class="enfant">Enfant 6</div> </div> <p>Passez votre souris sur un enfant pour modifier l'apparence des voisins, si ils existent.</p> <script type="text/javascript"> var enfants=document.querySelectorAll("div#container > div"); for (var i=0; i<enfants.length; i++) { enfants[i].addEventListener("mouseover", voisin); } function voisin(evenement) { /* Supprimer la mise en forme de tous les éléments enfants */ document.querySelectorAll("div#container > div").forEach(function(element) {element.className="";}); /* Ajout de la classe sur les éléments suivant et précédent */ if (evenement.target.nextElementSibling) { /* Vérifier que l'élément suivant existe */ evenement.target.nextElementSibling.className="surligne"; } if (evenement.target.previousElementSibling) { /* Vérifier que l'élément précédent existe */ evenement.target.previousElementSibling.className="surligne"; } /* Changer la classe de l'élément parent */ evenement.target.parentElement.className="containerOver"; } </script> <style type="text/css"> body { font-family: verdana; } h1 { font-size:15px; } div#container { display: flex; padding:8px; border:3px solid #999; justify-content: space-evenly; } div#container > div { margin:3px; padding:3px; padding-top:15px; padding-bottom:15px; background:#ccc; flex-grow: 1; text-align: center; border:2px solid #ccc; cursor: pointer; } .surligne { background-color: #666 !important; color:#fff; border-radius:6px; border:2px solid #000 !important; } .containerOver { border:3px dotted #000 !important; } </style></body></html>