Retourner à la page d'accueil de TJS

Script sibling : Manipulation des éléments frères et parent avec nextElementS

Edition 2 | 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>

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 24/07/2021 23:27:26 sur php7 en 29.69 ms