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

Publié le 23/05/2020 • Mis à jour le 23/05/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

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.


Démo HTML du snippet

/**
 * 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')
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Snippet aléatoire