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原生的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()添加的类并不会覆盖掉原来的类，减少了冗余。

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

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

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

JS：操作样式表 :addClass()和removeClass()

标签：

原文地址：http://www.cnblogs.com/wine/p/5045446.html