Ajouter ou enlever une classe d'un élément HTML avec JavaScript

Publié le 23/05/2020 • Actualisé le 23/05/2020

Dans ce bout de code, nous allons voir comment ajouter ou enlever une classe d'un élément HTML avec JavaScript. On peut utiliser la propriété classList de l'élément HTML que nous voulons modifier. Dans la démo suivante, on va supprimer ou ajouter la classe btn-primary selon sa présence. Dans ce cas nous pourrions aussi utiliser la fonction toggle.

---

/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  methods: {
    snippet92 () {
      if (this.$refs.button92.classList.contains('btn-primary')) {
        this.$refs.button92.classList.toggle('btn-primary')
      } else {
        this.$refs.button92.classList.add('btn-primary')
      }

      // or this.$refs.button92.classList.toggle('btn-primary')
    }
  }
}

Toogle the "btn-primary" class of this button

---

 Plus sur Stackoverflow   Lire la doc  Snippet aléatoire

  Travaillez avec moi !

---