如何在JavaScript中添加/删除类？

Question

由于element.classListIE 9和Safari-5不支持,什么是替代的跨浏览器解决方案？

没有框架请.

解决方案必须至少适用于IE 9,Safari 5,FireFox 4,Opera 11.5和Chrome.

相关帖子(但不包含解决方案):

1. 如何添加和删除css类

2. 添加和删​​除带动画的类

3. 添加删除类？

Answer 1

这里是纯javascript解决方案中addClass,removeClass,hasClass的解决方案.

实际上来自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,' ');
  }
}

Answer 2

我刚刚写了这些:

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

我认为它们适用于所有浏览器.

Answer 3

使用没有框架/库的类的一种方法是使用属性Element.className,它" 获取并设置指定元素的类属性的值. "(来自MDN文档).
正如@matías-fidemraizer在他的回答中已经提到的,一旦你获得元素的类字符串,你就可以使用与字符串相关的任何方法来修改它.

这是一个例子:
假设您有一个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
}

Answer 4

最简单的是element.classList它有remove(name),add(name),toggle(name),和contains(name)方法,现在所有的主流浏览器的支持.

对于较旧的浏览器更改element.className.这是两个帮手:

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

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

Answer 5

看看这些oneliners:

1. 删除课程:

   element.classList.remove('hidden');
   

2. 切换类(如果该类尚未存在则添加该类,如果是,则将其删除)

   element.classList.toggle('hidden');
   

就这样!我做了一个测试 - 10000次迭代.0.8S.

Answer 6

阅读此Mozilla开发者网络文章:

• https://developer.mozilla.org/en/DOM/element.className

由于element.className属性的类型为string,因此您可以使用任何JavaScript实现中的常规String对象函数:

• 如果要添加类,请首先使用String.indexOf以检查className中是否存在类.如果它不存在,只需将空白字符和新类名连接到此属性即可.如果它存在,什么都不做.

• 如果要删除类,只需使用String.replace,将"[className]"替换为空字符串.最后用于String.trim删除开头和结尾的空白字符element.className.

Answer 7

修正了@Paulpro解决方案

1. 不要用"阶级",因为它是一个保留字
2. removeClass 功能被打破,因为它重复使用后窃听了.

`

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