web-dev-qa-db-fra.com

Comment changer la classe d'un élément avec JavaScript?

Comment changer une classe d'un élément HTML en réponse à un événement onClick à l'aide de JavaScript?

2443
Nathan Smith

Techniques HTML5 modernes pour changer de classe

Les navigateurs modernes ont ajouté classList qui fournit des méthodes facilitant la manipulation de 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 fonctionnent pas dans Internet Explorer avant la v10, bien qu'il existe un shim pour l'ajouter à IE8 et IE9, disponible à partir de cette page . Cependant, il devient de plus en plus supporté .

Solution simple multi-navigateurs

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 autrement, et dans la bonne situation, utiliser simplement this au lieu de cela, cependant, entrer dans les détails à ce sujet dépasse le cadre de la réponse.

Pour changer 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 suit:

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

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

Pour supprimer une seule classe d'un élément, sans affecter les autres classes potentielles, un remplacement de regex simple 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 rationnelle 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)

L'indicateur g indique au remplacement de se répéter si nécessaire, au cas où le nom de la classe aurait été ajouté plusieurs fois.

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

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

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


Affectation de ces actions à des événements onclick:

Bien qu'il soit possible d'écrire JavaScript directement dans les attributs d'événement HTML (tels que onclick="this.className+=' MyClass'"), ce comportement n'est pas recommandé. En particulier dans les applications plus volumineuses, un code plus facile à gérer 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 à l'appeler 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 s'avérer plus appropriée.)

La deuxième étape consiste à déplacer l'événement onclick du code HTML vers JavaScript, par exemple à l'aide de 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 de HTML. Sans cela, le MyElement pourrait ne pas exister lorsque le code JavaScript est appelé pour que cette ligne échoue.)


Cadres et bibliothèques JavaScript

Le code ci-dessus est entièrement en JavaScript. Toutefois, il est courant d'utiliser un framework ou une bibliothèque pour simplifier les tâches courantes, ainsi que de tirer profit des bogues corrigés et des cas Edge auxquels vous pourriez ne pas penser lors de l'écriture de votre code.

Bien que certaines personnes considèrent qu’il est excessif d’ajouter un cadre d’environ 50 Ko pour changer simplement une classe, il vaut la peine d’envisager tout travail important sur JavaScript ou tout ce qui pourrait avoir un comportement inhabituel entre navigateurs.

(Très grossièrement, une bibliothèque est un ensemble d’outils conçus pour une tâche spécifique, alors qu’un framework contient généralement plusieurs bibliothèques et effectue un ensemble complet de tâches.)

Les exemples ci-dessus ont été reproduits ci-dessous à l’aide de jQuery , probablement la bibliothèque JavaScript la plus utilisée (bien que d’autres méritent également d’être explorées).

(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 click avec jQuery:

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

ou, sans avoir besoin d'un identifiant:

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


3675
Peter Boughton

Vous pouvez aussi simplement faire:

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

Et pour changer de classe (supprimer s'il existe, sinon ajoutez-le):

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

Dans l'un de mes anciens projets qui n'utilisaient pas jQuery, j'ai créé les fonctions suivantes pour ajouter, supprimer et vérifier si l'élément a 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, ' ');
    }
}

Donc, par exemple, si je veux que l'onclick ajoute 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>

Pour le moment, il vaudrait mieux utiliser jQuery.

105
Andrew Orsich

Vous pouvez utiliser node.className comme suit:

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

Cela devrait fonctionner dans IE5.5 et suivant selon PPK .

70
Eric Wendelin

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

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

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);
    }
}
44
PseudoNinja

Cela fonctionne pour moi:

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

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

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, utilisez simplement ceci (sur click ajoutera ou supprimera une classe):

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

Voici demo .

18
moka

Juste pour ajouter des informations provenant d’un autre framework populaire, Google Closures, voyez leur dom/classes class:

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 consiste à utiliser goog.dom.query avec un sélecteur CSS3:

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

Quelques petites notes et modifications sur les regex précédentes:

Vous voudrez le faire globalement si la liste de classes a plusieurs fois le nom de la classe. Et, vous voudrez probablement supprimer des espaces aux extrémités de la liste de classes et convertir plusieurs espaces en un seul espace afin d'éviter toute succession d'espaces. Aucune de ces choses ne devrait être un problème si le seul code dinking avec les 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 douter de la liste des noms de classe.

Cette expression régulière est insensible à la casse, de sorte que des bogues dans les noms de classe peuvent 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, ' ') + "]");
13
Alex Robinson

Changer 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
12
Hiren Kansara

Je voudrais utiliser jQuery et écrire quelque chose comme ça:

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

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

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 la quasi-totalité des navigateurs modernes, ce qui vous fera gagner du temps pour la mise en œuvre. votre propre code pour faire la même chose.

Merci

11
shingokko

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/','');
9
Eric Bailey

Voici ma version qui fonctionne parfaitement:

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")' >
7
alfred

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 de manière dynamique

7
kofifus

Changer la classe d'un élément dans JavaScript Vanilla avec le support IE6

Vous pouvez essayer d’utiliser la propriété node attributes 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>

6
Eugene Tiurin

J'utilise les fonctions JavaScript Vanilla suivantes dans mon code. Ils utilisent des expressions régulières et indexOf mais n'exigent pas de citer des caractères 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.

5
Salman A

classList API DOM:

Une manière très pratique d’ajouter et de supprimer des classes est l’API DOM classList. Cette API nous permet de sélectionner toutes les classes d'un élément DOM spécifique afin de modifier la liste à l'aide de 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 également de nombreuses méthodes et propriétés auxiliaires. Cet objet hérite de l'interface DOMTokenList , interface utilisée dans le DOM pour représenter un ensemble de jetons séparés par des espaces (comme des 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>
  

0
Willem van der Veen

OK, je pense que dans ce cas, vous devriez 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’ai pas besoin de cela pour d’autres raisons.

Je voudrais faire quelque chose comme ci-dessous comme méthodes pour mon framework javascript pour ajouter quelques fonctionnalités qui gèrent l'ajout de classes, la suppression de classes, etc. similaire à jQuery, ceci est entièrement supporté dans IE9 +, mon code est également écrit en ES6. pour vous assurer que votre navigateur le supporte ou que vous utilisez quelque chose comme babel, sinon vous devez utiliser la syntaxe ES5 dans votre code. De cette manière, nous trouvons un é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 les utiliser comme ci-dessous, imaginez que votre élément ait l'id de 'id' et la classe de 'classe', assurez-vous de les transmettre en tant que chaîne, vous pouvez utiliser l'utilitaire comme ci-dessous:

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

Oui, il y a plusieurs façons de le faire. Dans la syntaxe ES6, nous pouvons réaliser facilement. Utilisez ce code bascule 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>

0
Danish Khan

Je pensais que je mettrais ceci dans:

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(' ');
}
0
PHPglue

il suffit de dire myElement.classList="new-class" sauf si vous devez conserver d'autres classes existantes, auquel cas vous pouvez utiliser les méthodes classList.add, .remove.

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>

0
Ron Royston

essayer

function change(el) { el.className='second' }
.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }
<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>
0
Kamil Kiełczewski

LES OPTIONS.

Voici quelques exemples de styles et classList pour vous permettre de voir quelles sont les options dont vous disposez et comment utiliser classList pour faire ce que vous voulez.

style et classList

La différence entre style et classList réside dans le fait qu'avec style, vous ajoutez des propriétés de style à l'élément, mais que classList contrôle un peu la classe (les classes) de l'élément (add, remove, toggle, contain), je vais vous montrer comment d'utiliser les méthodes add et remove car ce sont les plus populaires.


Exemple de style

Si vous voulez ajouter la propriété margin-top 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.

classList Exemple

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-a et class-b, et nous voulons contrôler quelles classes remove et à quelle classe add. C’est là que classList devient pratique.

Supprimer 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")


0
Farhad

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 tout.

Et, si vous voulez vraiment connaître le pourquoi et vous renseigner, alors je vous suggère de lire la réponse de Peter Boughton, c'est parfait:
https://stackoverflow.com/a/196038/1804013

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

  • getElementById ()
  • getElementsByClassName ()
  • querySelector ()
  • querySelectorAll ()
0
tfont