效果（点击按钮可以改变box的样式，在原有样式上添加移除切换样式）： html代码：
<button id="btn1">点击改变box1的样式</button> <br> <br> <div id="box1" class="b1 b2"></div>css代码：
.b1{ width: 100px; height: 100px; background-color: greenyellow; } .b2{ /* width: 200px; */ height: 300px; background-color: rgb(87, 201, 201); }js代码：
window.onload = function(){ var btn1 = document.getElementById("btn1"); var box1 = document.getElementById("box1"); btn1.onclick = function(){ //通过修改元素的class属性来修改样式 //性能较高 // box1.className = "b2"; //添加 // addClass(box1, "b2"); //移除 // removeClass(box1, "b2"); //切换 toggleClass(box1, "b2"); }; }; //定义一个函数，用来向元素中添加指定的class属性值 //参数 // obj：要添加class的元素 // cn：要添加的class值 function addClass(obj, cn){ if(!hasClass(obj, cn)){ obj.className += " " + cn; } } //判断一个函数中是否含有指定的class属性值 function hasClass(obj, cn){ //判断obj中有没有cn class //创建一个正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); } //删除一个元素中指定的class function removeClass(obj, cn){ var reg = new RegExp("\\b" + cn + "\\b"); obj.className = obj.className.replace(reg, ""); } //切换一个类 //如果元素中有该类，则删除 //如果没有，则添加 function toggleClass(obj, cn){ if(hasClass(obj, cn)){ removeClass(obj, cn) }else{ addClass(obj, cn) } }