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