|
|
@@ -0,0 +1,43 @@
|
|
|
+Manipuler les classes avec `className` serait bien peu pratique ! Prends
|
|
|
+l'élément suivant :
|
|
|
+
|
|
|
+```html
|
|
|
+<button id="btn1" class="btn btn-primary active">Bouton actif</button>
|
|
|
+```
|
|
|
+On pourrait avoir les styles suivants dans l'en-tête HTML :
|
|
|
+```html
|
|
|
+<style>
|
|
|
+.btn { padding: 10px; border-radius: 3px; }
|
|
|
+.btn-primary { background: #aaf; border: 1px solid #aaf; }
|
|
|
+.btn-secondary { background: #aff; border: 1px solid #aff; }
|
|
|
+.active { font-weight: bold; }
|
|
|
+</style>
|
|
|
+```
|
|
|
+
|
|
|
+Comment faire si je veux enlever `active`, ou remplacer `btn-primary` par `btn-secondary` ?
|
|
|
+Cela m'oblige à faire des manipulations potentiellement complexes sur la chaîne assignée à
|
|
|
+`className`.
|
|
|
+
|
|
|
+<blockquote>
|
|
|
+La propriété <code>classList</code> contient non pas une chaîne, mais une <em>liste</em> des classes.
|
|
|
+Ce n'est pas un simple tableau, mais un objet renfermant un tableau, et qui offre les méthodes :
|
|
|
+<ul>
|
|
|
+ <li><code>add</code> : <em>ajouter</em> une classe</li>
|
|
|
+ <li><code>remove</code> : <em>supprimer</em> une classe</li>
|
|
|
+ <li><code>toggle</code> : <em>changer</em> l'existence d'une classe</li>
|
|
|
+ <li><code>contains</code> : <em>vérifier</em> l'existence d'une classe</li>
|
|
|
+</ul>
|
|
|
+Quand on manipule <code>className</code>, <code>classList</code> est mise à jour automatiquement, et vice-versa.
|
|
|
+</blockquote>
|
|
|
+
|
|
|
+Exemple avec le bouton ci-dessus (regarde le résultat avant et après que tu aies inséré le code ci-dessous) :
|
|
|
+```javascript
|
|
|
+var button = document.getElementById('btn1');
|
|
|
+button.classList.remove('btn-primary');
|
|
|
+button.classList.add('btn-secondary');
|
|
|
+button.classList.toggle('active');
|
|
|
+if(! button.classList.contains('active')) {
|
|
|
+ button.innerHTML = 'Bouton inactif';
|
|
|
+}
|
|
|
+console.dir(button);
|
|
|
+```
|
