Supprimer la classe CSS de L'élément avec JavaScript (no jQuery) [dupliquer]
cette question a déjà une réponse ici:
- modifier la classe D'un élément avec JavaScript 25 réponses
est-ce que quelqu'un pourrait me faire savoir comment supprimer une classe sur un élément en utilisant JavaScript seulement? S'il vous plaît ne me donnez pas une réponse avec jQuery que je ne peux pas utiliser, et je ne sais pas rien à ce sujet.
13 réponses
la bonne façon de faire est d'utiliser classList
. Il est maintenant largement pris en charge dans la dernière version de la plupart des navigateurs modernes :
ELEMENT.classList.remove("CLASS_NAME");
Documentation: https://developer.mozilla.org/en/DOM/element.classList
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 catégorie que vous souhaitez supprimer.
mise à jour: Pour prendre en charge les noms de classe contenant un caractère de tiret, comme "My-Class", utilisez
document.getElementById("MyID").className =
document.getElementById("MyID").className
.replace(new RegExp('(?:^|\s)'+ 'My-Class' + '(?:\s|$)'), ' ');
Voici une façon de faire cuire cette fonctionnalité dans tous les éléments 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;
}
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,' ');
}
}
div.classList.add("foo");
div.classList.remove("foo");
plus à https://developer.mozilla.org/en-US/docs/Web/API/element.classList
Modifier
OK, réécriture complète. Ça 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;
};
Ancien Poste
Je travaillais avec quelque chose comme ça. Voici une solution je suis venu avec...
// 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 chaîne: myElement.removeClass("oldClass").addClass("newClass");
c'est très simple, je pense.
document.getElementById("whatever").classList.remove("className");
, essayez:
function removeClassName(elem, name){
var remClass = elem.className;
var re = new RegExp('(^| )' + name + '( |$)');
remClass = remClass.replace(re, '');
remClass = remClass.replace(/ $/, '');
elem.className = remClass;
}
var element = document.getElementById('example_id');
var remove_class = 'example_class';
element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
Toutes ces réponses sont trop compliqués, 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. Les crédits vont à jondavidjohn supprimer la partie de chaîne en Javascript
j'utilise ce code JS snippet:
tout d'abord, j'atteins toutes les classes puis selon l'index de ma classe cible, je mets className = " .
Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
il y a aussi $.toggleClass
, $.addClass
, et $.removeClass
. Pour la documentation, consultez http://api.jquery.com/toggleClass / .
regardez ce jsfiddle exemple pour le voir en action.
document.getElementById("whatever").className += "classToKeep";
avec le signe plus ('+') ajoutant la classe au lieu de remplacer toute classe existante