Manipuler les classes, attributs et styles ########################################## Une fois que l'on sait créer ou sélectionner des éléments, on peut vouloir en modifier les attributs : classes, attributs data, styles en ligne… .. warning:: Rappelons que l'usage des styles en ligne est une mauvaise pratique à éviter en temps normal.) element.classList ***************** La propriété ``classList`` des éléments contient 3 méthodes permettant d'agir sur les classes de l'élément. classlist.add ============= ``classList.add`` permet d'ajouter une classe à un élément. .. code-block:: javascript document.body.classList.add('classe-a-ajouter') classlist.remove ================ ``classList.remove`` permet d'enlever une classe à un élément. .. code-block:: javascript document.body.classList.remove('classe-a-enlever') classlist.toggle ================ ``classList.toggle`` permet d'ajouter une classe absente ou d'enlever une classe présente à un élément. .. code-block:: javascript document.body.classList.toggle('classe-a-basculer') element.setAttribute ******************** ``element.setAttribute`` permet de configurer les attributs d'un élément donné. .. code-block:: javascript document.body.setAttribute( 'data-exemple', "quelque chose" ); document.body.setAttribute( 'aria-visible', true ); Cela donnerait : .. code-block:: html .. note:: Notons l'existence de ``element.getAttribute`` permettant de lire la valeur associée à un attribut. element.style ************* Pour modifier les styles inline (on rappelle que les styles inline sont une mauvaise pratique), on peut utiliser la propriété style. .. code-block:: javascript document.body.style.width = '100%'; document.body.style.fontSize = '16px'; document.body.style.background = 'black'; document.body.style.color = 'white'; exercice ******** Complétez `cet exercice `_ .