🏍️类操作
通过前文的学习，相信大家可以很快的将 CSS 的样式通过 JS 来改变。如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style> .divClass{ width: 100px; height: 100px; background-color: #f00; } </style><script>window.addEventListener('load',function(){ // 1.获取元素varbtn=document.querySelector('button'); varbox=document.querySelector('#box'); // 2.事件绑定btn.addEventListener('click',function(){ box.style.width='200px'; box.style.height='200px'; box.style.backgroundColor='#0f0'; }) }) </script></head><body><button>按钮</button><br><br><divid="box"class="divClass"></div></body></html>
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，如上面代码所示，我们修改了三次属性，浏览器就需要渲染三次，这样执行的性能是比较差的，当我们需要修改多个样式时，这样用JS操作也不方便。能不能通过一行代码，可以同时修改多个样式。
我们可以通过修改元素的class属性名来间接修改样式，这样一来我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染一次页面，性能较好，以这种方式可以使表现和行为进一步分离。
🍇添加类
但是当我们不想修改原有的样式，只是想另外新增样式，怎么办？如下：
但是还是有点麻烦，能不能将新增的样式封装在一个函数里面，想用的时候直接调用就行，可以的
//定义一个函数，用来向一个元素中添加指定的class属性值//obj：要添加class属性的元素；cn：要添加的class值functionaddClass(obj,cd){ obj.className+=" "+cn; }
🍈判断类是否存在
虽然如上图所示效果达到了，但是是有缺陷的，当你不断点击按钮是会不断生成divClass1类名在div元素上，虽然对页面没有造成影响，但是不太美观，也造成资源的浪费，所以要用函数杜绝。
<script>window.addEventListener('load',function(){ // 1.获取元素varbtn=document.querySelector('button'); varbox=document.querySelector('#box'); // 2.事件绑定btn.addEventListener('click',function(){ // box.className += ' divClass1';addClass(box,"divClass1") }) //定义一个函数，用来向一个元素中添加指定的class属性值//obj：要添加class属性的元素；cn：要添加的class值functionaddClass(obj,cn){ // 检查obj中是否含有cnif(!hasClass(obj,cn)){ obj.className+=" "+cn; } } // 判断一个函数是否含有指定的class属性值，如果有该class返回true，没有返回falsefunctionhasClass(obj,cn){ // 判断obj 是否含有 cn class// 创建一个正则表达式varreg=newRegExp("\\b"+cn+"\\b"); returnreg.test(obj.className); } }) </script>
🍌删除类
上文提到了增加类名，判断类名是否存在，现在讲解一下如何删除类名？如下：
// 删除一个元素中指定的class属性functionremoveClass(obj,cn){ // 创建一个正则表达式varreg=newRegExp("\\b"+cn+"\\b"); // 删除class 用replace将类名替换成空字符串obj.className=obj.className.replace(reg,"") }
🍉切换类
切换类就很方便了，综合了上文所有的方法，如下：
// toggleClass用来切换一个类// 如果元素具有该类则删除，如果元素没有该类则添加functiontoggleClass(obj,cn){ // 判断obj中是否有该类if(hasClass(obj,cn)){ // 有，删除removeClass(obj,cn); }else{ // 没有，则添加addClass(obj,cn); } }
🍎完整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style> .divClass{ width: 100px; height: 100px; background-color: #f00; } .divClass1{ width: 200px; height: 200px; background-color: #0f0; } </style><script>window.addEventListener('load',function(){ // 1.获取元素varbtn=document.querySelector('button'); varbox=document.querySelector('#box'); // 2.事件绑定btn.addEventListener('click',function(){ // box.className += ' divClass1';// addClass(box,"divClass1")// removeClass(box,"divClass1")toggleClass(box,"divClass1") }) //定义一个函数，用来向一个元素中添加指定的class属性值//obj：要添加class属性的元素；cn：要添加的class值functionaddClass(obj,cn){ // 检查obj中是否含有cnif(!hasClass(obj,cn)){ obj.className+=" "+cn; } } // 判断一个函数是否含有指定的class属性值，如果有该class返回true，没有返回falsefunctionhasClass(obj,cn){ // 判断obj 是否含有 cn class// 创建一个正则表达式varreg=newRegExp("\\b"+cn+"\\b"); returnreg.test(obj.className); } // 删除一个元素中指定的class属性functionremoveClass(obj,cn){ // 创建一个正则表达式varreg=newRegExp("\\b"+cn+"\\b"); // 删除class 用replace将类名替换成空字符串obj.className=obj.className.replace(reg,"") } // toggleClass用来切换一个类// 如果元素具有该类则删除，如果元素没有该类则添加functiontoggleClass(obj,cn){ // 判断obj中是否有该类if(hasClass(obj,cn)){ // 有，删除removeClass(obj,cn); }else{ // 没有，则添加addClass(obj,cn); } } }) </script></head><body><button>按钮</button><br><br><divid="box"class="divClass"></div></body></html>
🍊总结：(封装函数)
根据上文所讲的类的操作，我们完全可以将类操作封装在一个JS文件中，想用直接调用。
//定义一个函数，用来向一个元素中添加指定的class属性值//obj：要添加class属性的元素；cn：要添加的class值functionaddClass(obj,cn){ // 检查obj中是否含有cnif(!hasClass(obj,cn)){ obj.className+=" "+cn; } } // 判断一个函数是否含有指定的class属性值，如果有该class返回true，没有返回falsefunctionhasClass(obj,cn){ // 判断obj 是否含有 cn class// 创建一个正则表达式varreg=newRegExp("\\b"+cn+"\\b"); returnreg.test(obj.className); } // 删除一个元素中指定的class属性functionremoveClass(obj,cn){ // 创建一个正则表达式varreg=newRegExp("\\b"+cn+"\\b"); // 删除class 用replace将类名替换成空字符串obj.className=obj.className.replace(reg,"") } // toggleClass用来切换一个类// 如果元素具有该类则删除，如果元素没有该类则添加functiontoggleClass(obj,cn){ // 判断obj中是否有该类if(hasClass(obj,cn)){ // 有，删除removeClass(obj,cn); }else{ // 没有，则添加addClass(obj,cn); } }
