元素.style.样式名=样式值
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。
这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
修改box的class属性
我们可以通过修改元素的class属性来间接的修改样式，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好
并且这种方式，可以使表现和行为进一步的分离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<button id="btn01">点击按钮以后修改box的样式</button>
<div id="box" class="b1"></div>
</body>
<script>
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//可以通过修改元素的class属性来间接的修改样式
box.className+=" b2";
};
</script>
</html>
定义一个函数，判断一个元素中是否含有指定的class属性值
参数:
obj 要添加class属性的元素
cn 要添加的class值
如果有该class，则返回true，没有则返回false
function hasClass(obj,cn){
//创建一个正则表达式
var reg=new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
};
调用：
alert(hasClass(box,"b2"));
定义一个函数，用来向一个元素中添加指定的class属性值
参数同上
function addClass(obj,cn){
//检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className+=" "+cn;
}
};
调用：addClass(box,"b2");
定义一个函数，册除一个元素中的指定的class属性
参数同上
function removeClass(obj,cn){
//创建一个正则表达式
var reg=new RegExp("\\b"+cn+"\\b");
//删除class
obj.className=obj.className.replace(reg,"");
};
调用：
removeClass(box,"b1");
定义一个函数，toggleclass可以用来切换一个类
参数同上
如果元素中具有该类，则删除
如果元素中没有该类，则添加
function toggleClass(obj,cn){
//判断obj中是否含有cn
if(hasClass(obj,cn)){
//有，则删除
removeClass(obj,cn);
}else{
//没有，则添加
addClass(obj,cn);
}
};
调用：
toggleClass(box,"b2");
