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


2776

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


28
"L'attribut class est principalement utilisé pour pointer vers une classe dans une feuille de style. Cependant, il peut également être utilisé par un JavaScript (via le DOM HTML) pour apporter des modifications aux éléments HTML avec une classe spécifiée." - w3schools.com/tags/att_standard_class.asp
Triynko

11
element.setAttribute(name, value); Remplacez namepar class. Remplacez valuepar le nom que vous avez donné à la classe, entre guillemets. Cela évite d'avoir à supprimer la classe actuelle et à en ajouter une autre. Cet exemple jsFiddle montre le code de travail complet.
Alan Wells

3
Pour changer une classe d'élément HTML avec onClick utilisez ce code: <input type='button' onclick='addNewClass(this)' value='Create' /> et dans la section javascript: function addNewClass(elem){ elem.className="newClass";} En ligne
Iman Bahrampour

@Triynko - ce lien sur w3schools a changé, ressemble à septembre 2012. Voici cette page sur Archive.org du 12 / Sep / 2012: classe HTML Attribute-w3schools . Voici le lien vers la page de remplacement sur w3schools.com: Attribut de classe HTML-w3schools .
Kevin Fegan

Réponses:


3881

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);



105
Excellente réponse Peter. Une question ... pourquoi est-il préférable de faire avec JQuery que Javascript? JQuery est génial, mais si c'est tout ce que vous devez faire - qu'est-ce qui justifie d'inclure l'intégralité du libray JQuery au lieu de quelques lignes de JavaScript?
mattstuehler

23
@mattstuehler 1) l'expression "mieux encore x" signifie souvent "mieux encore (vous pouvez) x". 2) Pour aller au cœur du problème, jQuery est conçu pour faciliter l'accès / la manipulation du DOM, et très souvent si vous devez faire ce genre de chose une fois que vous devez le faire partout.
Barry

31
Un bogue avec cette solution: lorsque vous cliquez plusieurs fois sur votre bouton, il ajoute plusieurs fois la classe de "MyClass" à l'élément, plutôt que de vérifier s'il existe déjà. Ainsi, vous pourriez vous retrouver avec un attribut de classe HTML ressemblant à ceci:class="button MyClass MyClass MyClass"
Web_Designer

35
Si vous essayez de supprimer une classe 'myClass' et que vous avez une classe 'prefix-myClass', l'expression régulière que vous avez donnée ci-dessus pour supprimer une classe vous laissera avec 'prefix-' dans votre className: O
jinglesthula

16
Wow, trois ans et 183 votes positifs et personne n'a repéré cela jusqu'à présent. Merci jinglesthula, j'ai corrigé l'expression régulière afin qu'elle ne supprime pas incorrectement des parties des noms de classe. // Je suppose que c'est un bon exemple de la raison pour laquelle un Framework (comme jQuery) mérite d'être utilisé - des bugs comme celui-ci sont détectés et corrigés plus tôt, et ne nécessitent pas de modifications du code normal.
Peter Boughton du

422

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');

63
Je crois que cela dépend de HTML5.
John

12
Vous aurez besoin de la classListcale d' Eli Grey .
ELLIOTTCABLE

15
Mozilla Developer Network déclare qu'il ne fonctionne pas, nativement, dans Internet Explorers moins de 10. Je trouve que la déclaration est vraie, dans mes tests. Apparemment, la cale Eli Gray est requise pour Internet Explorer 8-9. Malheureusement, je ne l'ai pas trouvé sur son site (même avec la recherche). Le shim est disponible sur le lien Mozilla.
doubleJ


4
atow "classList" a un support partiel dans IE10 +; pas de support pour Opera Mini; sinon prise en charge complète dans les autres navigateurs standard: caniuse.com/#search=classlist
Nick Humphrey

119

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.


8
C'est idéal lorsque votre client ne vous permet pas d'utiliser jQuery. (Parce que vous finissez presque par construire votre propre bibliothèque.)
Mike

1
@Mike Si le client ne vous permet pas d'utiliser jQuery, ne pourriez-vous pas simplement parcourir et reconstruire uniquement les fonctionnalités dont vous aviez besoin dans votre propre bibliothèque?
kfrncs

5
@kfrncs Parce que je n'ai généralement pas besoin d'un cadre aussi grand. Pour le projet auquel je pensais, les seules fonctions dont j'avais besoin étaient les fonctions 3 classname (has, add, remove) et les fonctions cookie (has, add, remove). Tout le reste était soit personnalisé, soit nativement bien pris en charge. Donc, tout ensemble n'était alors que de 150 lignes avant d'être réduit, y compris les commentaires.
Mike

2
Mec, il est 4h du matin et merci beaucoup. Vanilla JS est ce que nous utilisons sur mon projet et cela m'a sauvé la vie.
LessQuesar

Ceci est ma solution préférée pour cela. Je l'utilise partout. Je crois que c'est la façon la plus élégante de réaliser l'ajout et la suppression de classes lorsque votre projet n'a pas déjà une autre façon de le faire.
WebWanderer

77

Vous pouvez utiliser node.classNamecomme ceci:

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

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


11
cela écraserait toutes les autres classes de l'objet ... ce n'est donc pas si simple.
Eric Sebasta

51

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

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

14
Je dirais que javascript discret est une pratique terrible pour écrire un exemple de code ...
Gabe

22
Je ne serais pas d'accord, car je pense que l'exemple de code devrait donner un bon exemple.
thomasrutter

1
Un bon exemple devrait instruire et stimuler l'imagination en même temps. Elle ne doit pas remplacer la pensée, mais l'inspirer.
Anthony Rutledge

4
Les autres réponses ne sont pas exagérées, elles conservent également les classes existantes sur l'élément.
gcampbell

47

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

33

Cela fonctionne pour moi:

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

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

Excellente réponse! Juste à gauche pour ajouter: définir pour chaque nom de classe CSS pour le sélecteur pour spécifier un style pour un groupe d'éléments de classe
Roman Polen.

Cela fonctionne pour moi sur FF, mais quand j'ai essayé d'utiliser el.className = "newStyle"; ça n'a pas marché, pourquoi?
Lukasz 'Severiaan' Grela

1
Vous pouvez utiliser el.setAttribute('class', newClass)ou mieux el.className = newClass. Mais non el.setAttribute('className', newClass).
Oriol

20

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 .


1
celui-ci est un peu bavard ... voici une solution très succincte ... jsfiddle.net/jdniki/UaT3P
zero_cool

5
Désolé @Jackson_Sandland mais vous avez totalement raté le point, qui n'est pas du tout d'utiliser jQuery.
moka

17

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];

14

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, ' ') + "]");

13

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

13

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


8
Vous n'avez qu'à écrire une fois jQuerydans sa forme longue. jQuery(function($) { });rend $disponible dans la fonction dans tous les cas.
ThiefMaster

10

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

8
Incorrect. Le RegEx est délimité par les barres obliques. L'ajout de guillemets provoque son échec dans IE, renvoyant la chaîne de la classe que vous essayez de supprimer plutôt que de supprimer réellement la classe.
Dylan

9

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>


8

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

4
Cela rompra la classe foobarsi vous essayez de supprimer la classe foo. Le JS dans les attributs intrinsèques du gestionnaire d'événements a été rompu avant d'être modifié. La réponse acceptée de 4 ans est bien meilleure.
Quentin

1
merci, je l'ai corrigé (pas le problème du préfixe). c'est l'ancienne réponse acceptée qui a un bug avec l'expression rationnelle.
Alfred

Le code a toujours le foobarproblème. Voir le test ici
rosell.dk

8

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


6

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.


3

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


1

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

1

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>


1

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');

1

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>
  


1

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>


1
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)

1

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()

1

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


1

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


1

essayer

element.className='second'


-2

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 .


1
Cela rompra les éléments avec plus d'une classe.
gcampbell

-4

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.