Comment puis-je changer une classe d'un élément HTML en réponse à un onclickévénement en utilisant JavaScript?

Techniques HTML5 modernes pour changer de classe

Les navigateurs modernes ont ajouté classList qui fournit des méthodes pour faciliter la manipulation des classes sans avoir besoin d'une bibliothèque:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Malheureusement, ceux-ci ne fonctionnaient pas dans Internet Explorer avant la version 10, bien qu'il existe un module d' interface pour l'ajouter à IE8 et IE9, disponible à partir de cette page . Il est, cependant, de plus en plus pris en charge .

Solution multi-navigateur simple

La méthode JavaScript standard pour sélectionner un élément utilise document.getElementById("Id"), ce que les exemples suivants utilisent - vous pouvez bien sûr obtenir des éléments d'autres manières, et dans la bonne situation, vous pouvez simplement utiliserthis place - cependant, entrer dans les détails à ce sujet dépasse le cadre de la réponse.

Pour modifier toutes les classes d'un élément:

Pour remplacer toutes les classes existantes par une ou plusieurs nouvelles classes, définissez l'attribut className:

document.getElementById("MyElement").className = "MyClass";

(Vous pouvez utiliser une liste délimitée par des espaces pour appliquer plusieurs classes.)

Pour ajouter une classe supplémentaire à un élément:

Pour ajouter une classe à un élément, sans supprimer / affecter les valeurs existantes, ajoutez un espace et le nouveau nom de classe, comme ceci:

document.getElementById("MyElement").className += " MyClass";

Pour supprimer une classe d'un élément:

Pour supprimer une seule classe d'un élément, sans affecter d'autres classes potentielles, un simple regex replace est requis:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Une explication de cette expression régulière est la suivante:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

le g indicateur indique au remplacement de se répéter selon les besoins, au cas où le nom de classe a été ajouté plusieurs fois.

Pour vérifier si une classe est déjà appliquée à un élément:

La même expression régulière utilisée ci-dessus pour supprimer une classe peut également être utilisée pour vérifier si une classe particulière existe:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Affectation de ces actions aux événements onclick:

Bien qu'il soit possible d'écrire JavaScript directement à l'intérieur des attributs d'événement HTML (tels que onclick="this.className+=' MyClass'" ), ce comportement n'est pas recommandé. Surtout sur les applications plus grandes, un code plus facile à maintenir est obtenu en séparant le balisage HTML de la logique d'interaction JavaScript.

La première étape pour y parvenir consiste à créer une fonction et à appeler la fonction dans l'attribut onclick, par exemple:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{(Il n'est pas nécessaire d'avoir ce code dans les balises de script, c'est simplement pour la brièveté de l'exemple, et l'inclusion de JavaScript dans un fichier distinct peut être plus appropriée.)}

La deuxième étape consiste à déplacer l'événement onclick hors du HTML et dans JavaScript, par exemple en utilisant addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Notez que la partie window.onload est requise pour que le contenu de cette fonction soit exécuté après le chargement du HTML - sans cela, MyElement pourrait ne pas exister lorsque le code JavaScript est appelé, de sorte que la ligne échouerait.)

Cadres et bibliothèques JavaScript

Le code ci-dessus est entièrement en JavaScript standard, mais il est courant d'utiliser soit un framework ou une bibliothèque pour simplifier les tâches courantes, ainsi que de bénéficier de bogues fixes et de cas marginaux auxquels vous pourriez ne pas penser lors de l'écriture de votre code.

Bien que certaines personnes considèrent qu'il est exagéré d'ajouter un cadre de ~ 50 Ko pour simplement changer une classe, si vous effectuez une quantité substantielle de travail JavaScript ou tout ce qui pourrait avoir un comportement inhabituel entre les navigateurs, cela vaut la peine d'être considéré.

(En gros, une bibliothèque est un ensemble d'outils conçus pour une tâche spécifique, tandis qu'un cadre contient généralement plusieurs bibliothèques et exécute un ensemble complet de fonctions.)

Les exemples ci-dessus ont été reproduits ci-dessous à l'aide de jQuery , probablement la bibliothèque JavaScript la plus utilisée (bien qu'il y en ait d'autres qui méritent également d'être étudiés).

(Notez que $voici l'objet jQuery.)

Changer de classe avec jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

De plus, jQuery fournit un raccourci pour ajouter une classe si elle ne s'applique pas ou pour supprimer une classe qui:

$('#MyElement').toggleClass('MyClass');

Assigner une fonction à un événement de clic avec jQuery:

$('#MyElement').click(changeClass);

ou, sans avoir besoin d'un identifiant:

$(':button:contains(My Button)').click(changeClass);

Vous pouvez aussi simplement faire:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Et pour basculer une classe (supprimez s'il existe sinon ajoutez-la):

document.getElementById('id').classList.toggle('class');

Dans l'un de mes anciens projets qui n'utilisaient pas jQuery, j'ai construit les fonctions suivantes pour ajouter, supprimer et vérifier si l'élément a une classe:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Ainsi, par exemple, si je veux onclickajouter une classe au bouton, je peux utiliser ceci:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

À l'heure actuelle, il serait préférable d'utiliser jQuery.

Vous pouvez utiliser node.classNamecomme ceci:

document.getElementById('foo').className = 'bar';

Cela devrait fonctionner dans IE5.5 et supérieur selon PPK .

Wow, surpris qu'il y ait tant de réponses exagérées ici ...

<div class="firstClass" onclick="this.className='secondClass'">

En utilisant du code JavaScript pur:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

Cela fonctionne pour moi:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Vous pouvez également étendre l'objet HTMLElement, afin d'ajouter des méthodes pour ajouter, supprimer, basculer et vérifier les classes ( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

Et puis il suffit d'utiliser comme ceci (au clic, on ajoutera ou supprimera une classe):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Voici la démo .

Pour ajouter des informations sur un autre framework populaire, Google Closures, consultez leur classe dom / classes :

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Une option pour sélectionner l'élément est d'utiliser goog.dom.query avec un sélecteur CSS3:

var myElement = goog.dom.query("#MyElement")[0];

Quelques notes et ajustements mineurs sur les expressions régulières précédentes:

Vous voudrez le faire globalement au cas où la liste de classe a le nom de classe plus d'une fois. Et, vous voudrez probablement supprimer les espaces des extrémités de la liste des classes et convertir plusieurs espaces en un seul espace pour éviter d'obtenir des séries d'espaces. Aucune de ces choses ne devrait être un problème si le seul code associé aux noms de classe utilise l'expression régulière ci-dessous et supprime un nom avant de l'ajouter. Mais. Eh bien, qui sait qui pourrait penser à la liste des noms de classe.

Cette expression régulière n'est pas sensible à la casse afin que les bogues dans les noms de classe puissent apparaître avant que le code ne soit utilisé sur un navigateur qui ne se soucie pas de la casse dans les noms de classe.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

Modifiez la classe CSS d'un élément avec JavaScript dans ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

J'utiliserais jQuery et j'écrirais quelque chose comme ceci:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Ce code ajoute une fonction à appeler lorsqu'un élément de l'id un élément est cliqué. La fonction ajoute cliqué sur l'attribut de classe de l'élément s'il n'en fait pas déjà partie et le supprime s'il est là.

Oui, vous devez ajouter une référence à la bibliothèque jQuery dans votre page pour utiliser ce code, mais au moins vous pouvez être sûr que la plupart des fonctions de la bibliothèque fonctionneraient sur à peu près tous les navigateurs modernes, et cela vous fera gagner du temps votre propre code pour faire de même.

Merci

La ligne

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

devrait être:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

Changer la classe d'un élément en JavaScript vanilla avec le support IE6

Vous pouvez essayer d'utiliser la attributespropriété de nœud pour conserver la compatibilité avec les anciens navigateurs, même IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})

.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}

<span id="message" class="">Click me</span>

Voici ma version, entièrement fonctionnelle:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Usage:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Voici un toggleClass pour basculer / ajouter / supprimer une classe sur un élément:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

voir jsfiddle

voir aussi ma réponse ici pour créer une nouvelle classe dynamiquement

J'utilise les fonctions JavaScript vanilla suivantes dans mon code. Ils utilisent des expressions régulières et indexOfne nécessitent pas de guillemets spéciaux dans les expressions régulières.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Vous pouvez également utiliser element.classList dans les navigateurs modernes.

LES OPTIONS.

Voici quelques exemples de style vs classList pour vous aider à voir quelles sont les options disponibles et comment utiliser classListpour faire ce que vous voulez.

style contre. classList

La différence entre styleet classListest que , avec stylevous ajoutez aux propriétés de style de l'élément, mais classListest de contrôler un peu la classe (s) de l'élément ( add, remove, toggle, contain), je vais vous montrer comment utiliser addet removeméthode puisque ceux -ci sont les plus populaires.

Exemple de style

Si vous voulez ajouter une margin-toppropriété dans un élément, vous feriez comme ceci:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Exemple classList

Disons que nous avons un <div class="class-a class-b">, dans ce cas, nous avons déjà 2 classes ajoutées à notre élément div, class-aet class-b, et nous voulons contrôler quelles classes removeet à quelle classe add. C'est ici queclassList devient pratique.

Retirer class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Ajouter class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Je pensais juste que je mettrais ceci:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

dites simplement à myElement.classList="new-class"moins que vous n'ayez besoin de maintenir d'autres classes existantes, auquel cas vous pouvez utiliser leclassList.add, .remove méthodes.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});

div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}

<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

OK, je pense que dans ce cas, vous devez utiliser jQuery ou écrire vos propres méthodes en javascript pur, ma préférence est d'ajouter mes propres méthodes plutôt que d'injecter tout jQuery dans mon application si je n'en ai pas besoin pour d'autres raisons.

J'aimerais faire quelque chose comme ci-dessous en tant que méthodes dans mon framework javascript pour ajouter quelques fonctionnalités qui gèrent l'ajout de classes, la suppression de classes, etc. similaires à jQuery, cela est entièrement pris en charge dans IE9 +, mon code est également écrit dans ES6, vous avez donc besoin pour vous assurer que votre navigateur le prend en charge ou que vous utilisez quelque chose comme babel, sinon vous devez utiliser la syntaxe ES5 dans votre code, de cette manière également, nous trouvons l'élément via ID, ce qui signifie que l'élément doit avoir un ID pour être sélectionné:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

et vous pouvez simplement appeler use them comme ci-dessous, imaginez que votre élément a l'id de 'id' et la classe de 'class', assurez-vous de les passer comme une chaîne, vous pouvez utiliser l'util comme ci-dessous:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

classList API DOM:

L' classListAPI DOM est une manière très pratique d'ajouter et de supprimer des classes . Cette API nous permet de sélectionner toutes les classes d'un élément DOM spécifique afin de modifier la liste en utilisant javascript. Par exemple:

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

Nous pouvons observer dans le journal que nous récupérons un objet avec non seulement les classes de l'élément, mais aussi de nombreuses méthodes et propriétés auxiliaires. Cet objet hérite de l'interface DOMTokenList , une interface qui est utilisée dans le DOM pour représenter un ensemble de jetons séparés par des espaces (comme les classes).

Exemple:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}

button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}

<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  

Oui, il existe de nombreuses façons de procéder. Dans la syntaxe ES6, nous pouvons le réaliser facilement. Utilisez ce code pour basculer ajouter et supprimer une classe.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}

body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}

<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

en utilisant la réponse acceptée ci-dessus, voici une simple fonction multi-navigateur pour ajouter et supprimer une classe

ajouter une classe:

classed(document.getElementById("denis"), "active", true)

supprimer la classe:

classed(document.getElementById("denis"), "active", false)

Beaucoup de réponses, beaucoup de bonnes réponses.

TL; DR:

document.getElementById('id').className = 'class'

OU

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

C'est ça.

Et, si vous voulez vraiment savoir pourquoi et vous renseigner, je suggère de lire la réponse de Peter Boughton , c'est parfait.

Remarque:
Ceci est possible avec ( document ou événement ):

• getElementById()
• getElementsByClassName()
• querySelector()
• querySelectorAll()

Il existe une propriété className en javascript pour changer le nom de la classe d'un élément HTML. La valeur de classe existante sera remplacée par la nouvelle que vous avez affectée dans className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Crédit - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

La question OP était: Comment puis-je changer la classe d'un élément avec JavaScript?

Les navigateurs modernes vous permettent de le faire avec une seule ligne de javascript :

document.getElementById('id').classList.replace('span1','span2')

L' classListattribut fournit un DOMTokenList qui a une variété de méthodes . Vous pouvez opérer sur la classList d'un élément en utilisant des manipulations simples comme add () , remove () ou replace () . Ou obtenez des classes très sophistiquées et manipulez comme vous le feriez avec un objet ou une carte avec keys () , values ​​() , entries ()

La réponse de Peter Boughton est excellente, mais elle a maintenant plus de dix ans. Tous les navigateurs modernes prennent désormais en charge DOMTokenList - voir https://caniuse.com/#search=classList et même IE11 prend en charge certaines méthodes DOMTokenList

essayer

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

<div onclick="change(this)" class="first">Click me</div>

Code JavaScript fonctionnel:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Vous pouvez télécharger un code de travail à partir de ce lien .

Voici un code jQuery simple pour le faire.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Ici,

• Class1 est un écouteur pour un événement.
• La classe parente est la classe qui héberge la classe que vous souhaitez modifier
• Classtoremove est l'ancienne classe que vous avez.
• La classe à ajouter est la nouvelle classe que vous souhaitez ajouter.
• 100 est le délai d'expiration pendant lequel la classe est modifiée.

Bonne chance.