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

Question

由于IE9和Safari-5不支持element.classList，那么跨浏览器的替代解决方案是什么？

请给我无框架。

解决方案必须至少在IE9、Safari 5、FireFox 4、Opera 11.5和Chrome中工作。

相关员额(但不包含解决方案)：

1. 如何添加和删除css类
2. 使用动画添加和删除类
3. 添加删除类？

Answer 1

在没有框架/库的情况下处理类的一种方法是使用属性Element.className，它“获取和设置指定元素的类属性的值”。(来自MDN文档)。

正如@mat 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 2

以下是纯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 3

看看这些单身汉：

1. 删除类： Element.classList.remove(“隐藏”)；
2. 切换类(如果类尚未出现，则添加类；如果存在，则将其移除) Element.classList.toggle(“隐藏”)；

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