JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）

var box = document.getElementById("box");

box.id = "pox";

将id = “box”，改为id = “pox”；

但id = “box”依然存在，这样就不符合W3C标准。不建议使用。

 

box.className = "box5"; 将会把原来的className 清除只有一个类名为box5的类。

 

如果想有用className避免这种缺陷，可以写成 box.className ="box5 box6 ....",但是这种方法太过麻烦，会造成冗余，因此可以用下面的方法：

 原生的js中并没有添加/删除类这些属性或方法，为了实现这一功能，因此写出了一下两个函数：

1.js原生的addClass()

首先判断是否有要添加的类名:

　　function hasClass(element, cName){
　　　　return !!element.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));
　　}

 

判断后，如果没有则添加

　　function addClass(element, cName){
　　　　if (!hasClass(element, cName)) {
　　　　　　return element.className += " " + cName;
　　　　};

　　}

addClass(box,"box6");
addClass(box,"box7");

此时的addClass()添加的类并不会覆盖掉原来的类，减少了冗余。

 

2.从多个类中删除一个元素 removeClass,其余类保留：

　　function removeClass(element,cName){
　　　　if (hasClass(element,cName)) {
　　　　　　element.className = element.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), " ");
　　　　};
　　}

 

　　removeClass(box,"box6"); //test,box,box7