addClass(element,value)函数，设置和叠加css样式

之前写过 javascript Camel记号 获取和设置元素CSS样式信息的CSS属性值  ，我们可以通过element.style.css样式属性  来获取和设置元素的样式信息

这样并不是不可以，只是不便于日后的维护，如果使用了javascript大量代码进行改变元素的样式，日后维护的时候成本太高，而如果通过改变元素的classname来从新渲染，则容易的多

下面是操作方法：

element.setAttribute("class","classname")
//或
element.classname = "classname" 

以上任意一种都以达到刷新元素的样式，凡是元素节点都是可读可写的，class就是元素节点，如果要检索class元素节点的值

element.setAttribute("class")
//或
element.classname

使用上面代码的任意一种即可

但是唯一的缺陷是，直接替换class会丢失之前的样式而直接使用新的样式，如果想保留之前的样式并叠加新的样式，需要用到下面的函数

 

good

可以把以上代码的2条注释分别去掉试试，一个一个的试，立马就可以看出他们的区别

wrapper.className = "newwrapper"会直接替换掉原来的样式

addClass(wrapper,"newwrapper")会叠加新的式样到原来的样式

addClass函数不只是用于叠加，如果元素本来没有样式也就是没有class属性，也一样可以改变样式，这时候的功能和wrapper.className = "newwrapper"是一样的

 

但是也有改变不了的时候：

	
good

wrapper.className = "newwrapper";  和addClass(wrapper,"newwrapper");  都没法改变样式，因为#box div的特殊性比.newwrapper高

由于CSS层叠和特殊性导致可能我们没法改变想要的效果，关于这方面可以看一下这个文章，了解下CSS层叠和特殊性

 

 下面这种直接内嵌CSS样式的，也同样无法改变（内嵌CSS样式就是style属性里面定义的，也就是CSS层叠和特殊性文章中说的行内式样）

good