js添加多个子节点_javaScript给元素添加多个class的简单实现

.div2{

font-size:16px;

color:orange;

}

.div3{

font-size:20px;

color:blue;

}

[1]直接把样式赋值给className

var odiv=document.getElementById('div1');

odiv.className= div3

//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;

[2]使用累加赋值给className

var odiv=document.getElementById('div1');

odiv.className+=" "+div3 　　//样式和样式之间需要空隙 ，所以加个空字符串隔开

//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";

[3]检测样式原先之前是否有相同的样式

var odiv=document.getElementById('div1');

function hasClass(element,csName){

element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式

}

[4]在[3]的基础上