如何添加/删除JavaScript中的类？
由于IE 9和Safari-5不支持element.classList ，所以跨浏览器的解决scheme是什么？
没有框架请。
解决scheme至less要在IE 9 ， Safari 5 ，FireFox 4，Opera 11.5和Chrome中运行。
相关post（但不包含解决scheme）：
-
如何添加和删除css类
-
使用animation添加和删除类
-
添加删除类？
使用没有框架/库的类的一种方法是使用属性Element.className，该属性“ 获取并设置指定元素的类属性的值 ”（来自MDN文档 ）。
正如@matías-fidemraizer在他的回答中已经提到的那样，一旦你得到了你的元素的类的string，你可以使用任何与string相关的方法来修改它。
这是一个例子：
假设你有一个ID为“myDiv”的div，并且你想在用户点击的时候添加类“main__section”
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 }
我只是写了这些：
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; }
我想他们会在所有浏览器中工作。
这里是纯JavaScript解决scheme中的addClass，removeClass，hasClass的解决scheme。
其实它来自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,' '); } }
阅读Mozilla开发者networking文章：
由于element.className属性是stringtypes，因此可以使用在任何JavaScript实现中find的常规string对象函数：
-
如果你想添加一个类，首先使用
String.indexOf来检查类是否存在于className中 。 如果不存在，只需将空白字符和新类名连接起来即可。 如果存在，什么也不要做。 -
如果你想删除一个类，只需使用
String.replace，用一个空stringreplace“[className]”。 最后使用String.trim删除element.className开始和结束处的空白字符。
最简单的是element.classList ，它具有remove(name) ， add(name) ， toggle(name)和contains(name)方法，现在被所有主stream浏览器支持 。
对于较老的浏览器，您可以更改element.className 。 这里有两个帮手：
function addClass(element, className){ element.className += ' ' + className; } function removeClass(element, className) { element.className = element.className.replace( new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim(); }
修复了@Paulpro的解决scheme
- 不要使用“class”，因为它是一个保留字
-
removeClassfunction被打破，因为它重复使用后buging。
`
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; }
解决的办法是
Shim .classList ：
使用DOM垫片或使用Eli Gray的垫片在下面
免责声明：我相信支持的是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)); }
看看这些线索：
-
删除课程：
element.classList.remove('hidden'); -
切换类（如果不是这样的类，则将其添加到className中，如果是则删除）
element.classList.toggle('hidden');
这一切！ 我正在做一个testing – 10000次迭代。 0.8S。
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(' '); }
以防万一任何人想要为元素构build原型函数，当我需要操纵不同对象的类时，就是这样使用的：
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(' ') }
使用它们就像： document.body.addClass('whatever')或document.body.removeClass('whatever')
你也可以使用任何其他元素（div，span，你的名字）
emil代码的改进版（使用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(); } }
添加css类： cssClassesStr += cssClassName;
删除css类： cssClassStr = cssClassStr.replace(cssClassName,"");
添加属性“类”： object.setAttribute("class", ""); //pure addition of this attribute object.setAttribute("class", ""); //pure addition of this attribute
删除属性： object.removeAttribute("class");
