什么是类操作样式？
类操作样式简单来说就是在js里面不使用：对象.style.样式 的形式对样式进行更改，而是直接对对象class属性进行更改，通过将class更改为在css里面预设定好的样式，能一步到位的直接进行样式更换
原理：
类操作就是在js类名类名对元素的className进行增删
注意：类的更改不一定完全是对一个类名的替换，由于允许对一个元素的类设置多个，那么就也有对类的增删
对类操作的好处：
相比于：对象.style.样式 这种方法在js里面对样式进行操作，通过更换class进行操作写的代码更少、更易于维护、耦合性更低(本质上来说js是用来设置页面里面的行为的，css才是用来操作样式的)
例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.style1{width: 100px;height: 50px;background-color: pink;border-radius:20px;transition: 0.3s;}.style2{width: 200px;height: 100px;border-radius: 40px;background-color: skyblue;transition: 0.3s;}</style>
</head>
<body><div class="style1" id="box"></div><script>var box=document.getElementById("box");box.addEventListener("mouseover",function(){/*box.style.width="200px";box.style.height="100px";box.style.backgroundColor="skyblue";*/box.className="style2";},false);box.addEventListener("mouseout",function(){/*box.style.width="100px";box.style.height="50px";box.style.backgroundColor="pink";*/box.className="style1";},false)</script>
</body>
</html>当需要对一个元素绑定一个事件，触发事件对该元素的样式进行更改时，如果更改的样式少些，那么style也可以使用，但稍多一点就会产生很多问题，
比如：1、下次更改时找半天也找不到要更改的样式；
2、js代码显得杂乱(一堆style更改)；
3、更改时需要对很多部分进行更改，容易遗忘或改错；
而使用类进行更改时就简介很多，如果需要对元素的样式进行更改，只需要对类名进行增删就可以了。
类操作的几个方法：
1、判断元素是否含有某个类
创建一个函数hasClass来判断一个元素是否含有某个类名
function hasClass(obj,cn){//注意：//正则表达式简写形式貌似无法传一个变量，这里用构造器创建正则表达式var reg = new RegExp("\\b"+cn+"\\b");return reg.test(obj.className);
}使用正则表达式来进行判断，注意使用分隔符\b，防止style1和style11弄混
2、向元素里面添加类
创建一个函数addClass来向一个元素里面添加某个类
function addClass(obj,cn){if(hasClass(obj,cn))return; //如果元素里面有要添加的类，则不再添加else obj.className+=` ${cn}`;
}添加类名前先判断该元素是否含有这个类
3、删除元素类名的某个类
创建一个函数removeClass来删除一个元素里面某个类
function removeClass(obj,cn){var reg = new RegExp("\\b "+cn+"\\b"); //第一个\\b后面要添加一个空格，可以保证删除后空格也删除if(reg.test(obj.className)){obj.className=obj.className.replace(reg,"");}else return;
}先通过正则表达式判断元素类名是否含有该类，再通过replace的正则表达式用法删除这个类
replace的使用：
replace是String的一个方法，用来将一段内容替换为另一段内容
参数：
1、要替换的内容，可以为正则表达式
如果为正则表达式，则默认只会替换第一个出现的，可以设置为g来去全部替换
2、替换的新内容
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.style1{width: 100px;height: 50px;background-color: pink;border-radius:20px;transition: 0.3s;}.style2{width: 200px;height: 100px;border-radius: 40px;background-color: skyblue;transition: 0.3s;}.style12{display: flex;align-items: center;justify-content: center;}</style>
</head>
<body><div class="style1 style12" id="box">1</div><button id="btn01">点击更换div样式</button><button id="btn02">点击恢复div样式</button><script>var box=document.getElementById("box");var btn01=document.getElementById("btn01");var btn02=document.getElementById("btn02");btn01.onclick=function(){addClass(box,"style2");}btn02.onclick=function(){removeClass(box,"style2");}function hasClass(obj,cn){//注意：//正则表达式简写形式貌似无法传一个变量，这里用构造器创建正则表达式var reg = new RegExp("\\b"+cn+"\\b");return (reg.test(obj.className));}function addClass(obj,cn){if(hasClass(obj,cn))return; //如果元素里面有要添加的类，则不再添加else obj.className+=` ${cn}`;}function removeClass(obj,cn){var reg = new RegExp("\\b "+cn+"\\b");if(reg.test(obj.className)){obj.className=obj.className.replace(reg,"");}else return;}</script>
</body>
</html>
