web-dev-qa-db-fra.com

Supprimer la classe CSS de l'élément avec JavaScript (pas de jQuery)

Quelqu'un pourrait-il me dire comment supprimer une classe sur un élément en utilisant uniquement JavaScript? S'il vous plaît ne me donnez pas de réponse avec jQuery car je ne peux pas l'utiliser, et je ne sais rien à ce sujet.

javascripthtmlcss
560
Amra

La bonne façon de procéder consiste à utiliser classList. Il est maintenant largement pris en charge par la dernière version de la plupart des navigateurs modernes :

ELEMENT.classList.remove("CLASS_NAME");

Documentation: https://developer.mozilla.org/en/DOM/element.classList

880
Paul Rouget
document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

où MyID est l'ID de l'élément et MyClass est le nom de la classe que vous souhaitez supprimer.

PDATE: Pour prendre en charge les noms de classe contenant un caractère tiret, tel que "My-Class", utilisez

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
513
ЯegDwight

Voici un moyen d'intégrer cette fonctionnalité dans tous les éléments du DOM:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}
56
Matthew
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ');
        }
    }
41
Keith Rousseau
div.classList.add("foo");
div.classList.remove("foo");

Plus sur https://developer.mozilla.org/en-US/docs/Web/API/element.classList

35
joseconstela

Modifier

Ok, complète ré-écrire. Cela fait longtemps, j'ai appris un peu et les commentaires ont aidé.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < this.className.indexOf(className));
    }
};

Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.Push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};
Old Post
// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
    Object.defineProperty(String.prototype,'trim', {
        value: function() {
            return this.replace(/^\s+|\s+$/g,'');
        },
        writable:false,
        enumerable:false,
        configurable:false
    });
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
    value: function(c) {
        if(this.className.indexOf(c)<0) {
            this.className=this.className+=' '+c;
        }
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double 
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
    value: function(c) {
        this.className=this.className.replace(c,'').replace('  ',' ').trim();
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});

Maintenant, vous pouvez appeler myElement.removeClass('myClass')

ou enchaîner: myElement.removeClass("oldClass").addClass("newClass");

27
Duncan

C'est très simple, je pense.

document.getElementById("whatever").classList.remove("className");
16
LivinKalai

essayer:

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}
9
scunliffe
var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
4
Tornike

Toutes ces réponses sont bien trop compliquées, essayez

var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');

Le résultat serait un retour de la chaîne

Hello

Super facile. Crédits aller à jondavidjohn Supprimer une portion de chaîne dans Javascript

2
aaa

J'utilise ce code d'extrait JS:

Tout d'abord, j'atteins toutes les classes puis en fonction de l'index de ma classe cible, je mets className = "".

Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
1
Amir