其中3个函数：
addClass(box, "b2");向box中添加b2类属性
removeClass(box, "b2");向box中移出box属性
toggleClass(box, "b2");替换box中的属性有的话删除，没有进行添加进来综合前两个函数
详细代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.b2 {
height: 300px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//获取box、btn01
var box = document.getElementById("box");
var btn01 = document.getElementById("btn01");
//为btn01绑定单击响应函数
btn01.onclick = function () {
/*
通过style属性来修改元素样式，每修改一个样式，浏览器就需要重新渲染一次页面
这样执行的性能是非常差的，而且这种形式在修改多个样式时也是不太方便
*/
//修改box样式
/* box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "yellow"; */
/*
我希望一行代码，可以同时修改多个样式,我们通过修改元素的class属性来间接修改样式
这样一来我们只需要修改一次，即可以同时修改多个样式，此时浏览器只需要重新渲染一次，性能较好，
并且这种方式，可以使表现和行为进一步分离
*/
//修改box的class属性，把b1换成b2
//box.className = "b2";
//如果我们不希望去掉b1而是希望在b1原有值得基础上加b2,把b2加到b1上
//box.className += " b2";
//addClass(box, "b2");
//removeClass(box, "b2");
toggleClass(box, "b2");
};
};
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
参数：
obj 要添加class属性的元素
cn 要添加的class值
*/
function addClass(obj, cn) {
//检查obj中是否含有cn
if (!hasClass(obj, cn)) {
//如果没有这个属性把它加进来
obj.className += " " + cn;
}
}
//判断一个元素中是否含有指定的class值，有返回true，没有返回false
/*
参数：
obj 要查询class属性的元素
cn 要查询的class值
*/
function hasClass(obj, cn) {
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;//\b单词边界
var reg = new RegExp("\\b" + cn + "\\b");//动态的生成一个正则表达式
return reg.test(obj.className);
}
//删除一个元素中指定的class属性函数
function removeClass(obj, cn) {
//创建一个正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
//删除class
obj.className = obj.className.replace(reg, "");
}
/*
toggleClass函数
可以用来切换一个类
如果元素具有该类，则删除
如果元素没有该类，则添加
*/
function toggleClass(obj, cn) {
//判断是否含有cn
if (hasClass(obj, cn)) {
//有，则删除
removeClass(obj, cn);
} else {
//没有，则添加
addClass(obj, cn);
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮修改box的样式</button><br><br>
<div id="box" class="b1"></div>
</body>
</html>结果：
点击按钮：
?
?