web-dev-qa-db-fra.com

Comment ajouter/supprimer une classe en JavaScript?

Étant donné que element.classList n'est pas pris en charge dans IE 9 et Safari-5, quelle solution de remplacement pour plusieurs navigateurs?

Pas de cadre s'il vous plaît.

Solution doit fonctionner dans au moins IE 9, Safari 5, FireFox 4, Opera 11.5 et Chrome.

Articles connexes (mais ne contient pas de solution):

  1. comment ajouter et supprimer une classe css

  2. Ajouter et supprimer une classe avec animation

  3. Ajouter retirer la classe?

javascriptdomcross-browser
52
Pacerier

Une façon de jouer avec des classes sans framework/bibliothèque serait d'utiliser la propriété Element.className, qui "obtient et définit la valeur de l'attribut class de l'élément spécifié." (À partir de documentation MDN ).
Comme @ matías-fidemraizer déjà mentionné dans sa réponse, une fois que vous avez obtenu la chaîne de classes de votre élément, vous pouvez utiliser toutes les méthodes associées aux chaînes pour le modifier.

Voici un exemple:
En supposant que vous avez un div avec l’ID "myDiv" et que vous souhaitez y ajouter la classe "main__section" lorsque l’utilisateur clique dessus,

window.onload = init;

function init() {
  document.getElementById("myDiv").onclick = addMyClass;
}

function addMyClass() {
  var classString = this.className; // returns the string of all the classes for myDiv
  var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space)
  this.className = newClass; // sets className to the new string
}
17
Yago DLT

Voici la solution pour addClass, removeClass, hasClass en solution javascript pure.

En fait, c'est de http://jaketrent.com/post/addremove-classes-raw-javascript/

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,' ');
  }
}
47
emil

Je viens d'écrire ceci:

function addClass(el, classNameToAdd){
    el.className += ' ' + classNameToAdd;   
}

function removeClass(el, classNameToRemove){
    var elClass = ' ' + el.className + ' ';
    while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
         elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
    }
    el.className = elClass;
}

Je pense qu'ils fonctionneront dans tous les navigateurs.

31
Paulpro

Le plus simple est element.classList qui a les méthodes remove(name), add(name), toggle(name) et contains(name) et est maintenant pris en charge par tous les principaux navigateurs .

Pour anciens navigateurs, vous modifiez element.className . Voici deux aides:

function addClass(element, className){
    element.className += ' ' + className;   
}

function removeClass(element, className) {
    element.className = element.className.replace(
        new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim();
}
13
Wernight

Lisez cet article du réseau de développeurs Mozilla:

Comme la propriété element.className est de type chaîne, vous pouvez utiliser les fonctions d'objet String habituelles de toute implémentation JavaScript:

  • Si vous souhaitez ajouter une classe, utilisez d'abord String.indexOf afin de vérifier si la classe est présente dans className. S'il n'est pas présent, concaténez simplement un caractère vide et le nouveau nom de classe dans cette propriété. Si c'est présent, ne faites rien.

  • Si vous souhaitez supprimer une classe, utilisez simplement String.replace, en remplaçant "[NomClasse]" par une chaîne vide. Enfin, utilisez String.trim pour supprimer les caractères vides au début et à la fin de element.className.

10
Matías Fidemraizer

Regardez ces oneliners:

  1. Supprimer la classe:

    element.classList.remove('hidden');

  2. Toggle class (ajoute la classe si elle n'est pas déjà présente et la supprime si c'est le cas)

    element.classList.toggle('hidden');

C'est tout! J'ai fait un test - 10000 itérations. 0.8s.

7
Sergio Belevskij

Correction de la solution de @Paulpro

  1. Ne pas utiliser "classe", car c'est un mot réservé
  2. La fonction removeClass était cassée, car elle a été détruite après une utilisation répétée.

`

function addClass(el, newClassName){
    el.className += ' ' + newClassName;   
}

function removeClass(el, removeClassName){
    var elClass = el.className;
    while(elClass.indexOf(removeClassName) != -1) {
        elClass = elClass.replace(removeClassName, '');
        elClass = elClass.trim();
    }
    el.className = elClass;
}
6
Drew

La solution est de

Shim .classList:

Utilisez soit le DOM-shim ou utilisez la cale d’Eli Grey ci-dessous

Disclaimer: Je crois que le support est FF3.6 +, Opera10 +, FF5, Chrome, IE8 +

/*
 * classList.js: Cross-browser full element.classList implementation.
 * 2011-06-15
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*global self, document, DOMException */

/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/

if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {

(function (view) {

"use strict";

var
      classListProp = "classList"
    , protoProp = "prototype"
    , elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
    , objCtr = Object
    , strTrim = String[protoProp].trim || function () {
        return this.replace(/^\s+|\s+$/g, "");
    }
    , arrIndexOf = Array[protoProp].indexOf || function (item) {
        var
              i = 0
            , len = this.length
        ;
        for (; i < len; i++) {
            if (i in this && this[i] === item) {
                return i;
            }
        }
        return -1;
    }
    // Vendors: please allow content code to instantiate DOMExceptions
    , DOMEx = function (type, message) {
        this.name = type;
        this.code = DOMException[type];
        this.message = message;
    }
    , checkTokenAndGetIndex = function (classList, token) {
        if (token === "") {
            throw new DOMEx(
                  "SYNTAX_ERR"
                , "An invalid or illegal string was specified"
            );
        }
        if (/\s/.test(token)) {
            throw new DOMEx(
                  "INVALID_CHARACTER_ERR"
                , "String contains an invalid character"
            );
        }
        return arrIndexOf.call(classList, token);
    }
    , ClassList = function (elem) {
        var
              trimmedClasses = strTrim.call(elem.className)
            , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
            , i = 0
            , len = classes.length
        ;
        for (; i < len; i++) {
            this.Push(classes[i]);
        }
        this._updateClassName = function () {
            elem.className = this.toString();
        };
    }
    , classListProto = ClassList[protoProp] = []
    , classListGetter = function () {
        return new ClassList(this);
    }
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
    return this[i] || null;
};
classListProto.contains = function (token) {
    token += "";
    return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token) {
    token += "";
    if (checkTokenAndGetIndex(this, token) === -1) {
        this.Push(token);
        this._updateClassName();
    }
};
classListProto.remove = function (token) {
    token += "";
    var index = checkTokenAndGetIndex(this, token);
    if (index !== -1) {
        this.splice(index, 1);
        this._updateClassName();
    }
};
classListProto.toggle = function (token) {
    token += "";
    if (checkTokenAndGetIndex(this, token) === -1) {
        this.add(token);
    } else {
        this.remove(token);
    }
};
classListProto.toString = function () {
    return this.join(" ");
};

if (objCtr.defineProperty) {
    var classListPropDesc = {
          get: classListGetter
        , enumerable: true
        , configurable: true
    };
    try {
        objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
    } catch (ex) { // IE 8 doesn't support enumerable:true
        if (ex.number === -0x7FF5EC54) {
            classListPropDesc.enumerable = false;
            objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
        }
    }
} else if (objCtr[protoProp].__defineGetter__) {
    elemCtrProto.__defineGetter__(classListProp, classListGetter);
}

}(self));

}
4
Raynos

Juste au cas où quelqu'un voudrait faire construire des fonctions prototypes pour les éléments, voici ce que j'utilise lorsque je dois manipuler des classes d'objets différents:

Element.prototype.addClass = function (classToAdd) {
  var classes = this.className.split(' ')
  if (classes.indexOf(classToAdd) === -1) classes.Push(classToAdd)
  this.className = classes.join(' ')
}

Element.prototype.removeClass = function (classToRemove) {
  var classes = this.className.split(' ')
  var idx =classes.indexOf(classToRemove)
  if (idx !== -1) classes.splice(idx,1)
  this.className = classes.join(' ')
}

Utilisez-les comme: document.body.addClass('whatever') ou document.body.removeClass('whatever')

Au lieu de body, vous pouvez également utiliser n’importe quel autre élément (div, span, vous le nommez)

2
Joanna Betlej
function addClass(element, classString) {
    element.className = element
        .className
        .split(' ')
        .filter(function (name) { return name !== classString; })
        .concat(classString)
        .join(' ');
}

function removeClass(element, classString) {
    element.className = element
        .className
        .split(' ')
        .filter(function (name) { return name !== classString; })
        .join(' ');
}
2
scott_trinh

Version améliorée du code emil (avec trim ())

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

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

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

ajouter des classes css: cssClassesStr += cssClassName;

supprimer les classes css: cssClassStr = cssClassStr.replace(cssClassName,"");

ajouter un attribut 'Classes': object.setAttribute("class", ""); //pure addition of this attribute

enlever l'attribut: object.removeAttribute("class");

0
reporter

Un moyen facile à comprendre:

// Add class 
DOMElement.className += " one";
// Example:
// var el = document.body;
// el.className += " two"

// Remove class 
function removeDOMClass(element, className) {
    var oldClasses      = element.className,
        oldClassesArray = oldClasses.split(" "),
        newClassesArray = [],
        newClasses;

    // Sort
    var currentClassChecked,
        i;     
    for ( i = 0; i < oldClassesArray.length; i++ ) { 
        // Specified class will not be added in the new array
        currentClassChecked = oldClassesArray[i];
        if( currentClassChecked !== className ) { 
            newClassesArray.Push(currentClassChecked);
        }
    }

    // Order 
    newClasses = newClassesArray.join(" ");

    // Apply     
    element.className = newClasses;

    return element;

}
// Example:
// var el = document.body;
// removeDOMClass(el, "two")

https://Gist.github.com/sorcamarian/ff8db48c4dbf4f50009820726119552

0
Marian07