【JavaScript】读懂JS中类的相关操作-阿里云开发者社区

【JavaScript】读懂JS中类的相关操作

2022-09-22 96

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 读懂JS中类的相关操作

🏍️类操作

通过前文的学习，相信大家可以很快的将 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>

图片.png

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，如上面代码所示，我们修改了三次属性，浏览器就需要渲染三次，这样执行的性能是比较差的，当我们需要修改多个样式时，这样用JS操作也不方便。能不能通过一行代码，可以同时修改多个样式。

我们可以通过修改元素的class属性名来间接修改样式，这样一来我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染一次页面，性能较好，以这种方式可以使表现和行为进一步分离。

🍇添加类

图片.png

但是当我们不想修改原有的样式，只是想另外新增样式，怎么办？如下：

图片.png

但是还是有点麻烦，能不能将新增的样式封装在一个函数里面，想用的时候直接调用就行，可以的

//定义一个函数，用来向一个元素中添加指定的class属性值//obj：要添加class属性的元素；cn：要添加的class值functionaddClass(obj,cd){
obj.className+=" "+cn; 
}

图片.png

🍈判断类是否存在

虽然如上图所示效果达到了，但是是有缺陷的，当你不断点击按钮是会不断生成divClass1类名在div元素上，虽然对页面没有造成影响，但是不太美观，也造成资源的浪费，所以要用函数杜绝。

图片.png

<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,"")
}

图片.png

🍉切换类

切换类就很方便了，综合了上文所有的方法，如下：

// toggleClass用来切换一个类// 如果元素具有该类则删除，如果元素没有该类则添加functiontoggleClass(obj,cn){
// 判断obj中是否有该类if(hasClass(obj,cn)){
// 有，删除removeClass(obj,cn);
    }else{
// 没有，则添加addClass(obj,cn);
    }
}

图片.png

🍎完整代码

<!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);
    }
}