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…

Avertissement

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.

document.body.classList.add('classe-a-ajouter')

classlist.remove¶

classList.remove permet d’enlever une classe à un élément.

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.

document.body.classList.toggle('classe-a-basculer')

element.setAttribute¶

element.setAttribute permet de configurer les attributs d’un élément donné.

document.body.setAttribute( 'data-exemple', "quelque chose" );
document.body.setAttribute( 'aria-visible', true );

Cela donnerait :

<body data-exemple="quelque chose" aria-visible=true></body>

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.

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 .