Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
developpement:javascript:doc [2019/02/12 22:21]
open1024jc [Modifier le style]
developpement:javascript:doc [2019/02/12 22:41] (Version actuelle)
open1024jc [Une autre façon de trouver un élément]
Ligne 748: Ligne 748:
   * document.querySelector simple renvoie la 1ère classe trouvée.   * document.querySelector simple renvoie la 1ère classe trouvée.
   * document.querySelectorAll revoie une NodeList.   * document.querySelectorAll revoie une NodeList.
 +  * document.querySelectorAll("​.para"​)[0];​ pour le 1er élément.
 <file JavaScript>​ <file JavaScript>​
 const para = document.querySelectorAll("​.para"​);​ const para = document.querySelectorAll("​.para"​);​
Ligne 753: Ligne 754:
 --> Console: --> Console:
 NodeList [ p.para, p.para ] NodeList [ p.para, p.para ]
 +</​file>​
 +
 +===== Ajouter et supprimer des classes CSS =====
 +<file JavaScript>​
 +const titre = document.querySelector("​h1"​);​
 +const liens = document.querySelectorAll("​a"​);​
 +liens[0].addEventListener("​click",​ function() {
 +    titre.classList.add("​fbi"​);​
 +});
 +liens[1].addEventListener("​click",​ function() {
 +    titre.classList.remove("​fbi"​);​
 +});
 +liens[2].addEventListener("​click",​ function() {
 +    titre.classList.toggle("​fbi"​);​
 +});
 </​file>​ </​file>​