2021-05-17js中类的操作（addClass，removeClass，toggleClass）

到处是知识盲区~

于 2021-05-18 00:17:23 发布

阅读量112

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55679349/article/details/116955793

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .b1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .b2{
            width: 200px;
            height: 200px;
            background-color: #007fd5;
        }
    </style>
    <script>
        window.onload=function(){
            var btn01=document.getElementById("btn01");
            var box=document.getElementById("box");
            btn01.onclick=function(){
             //修改box的类属性
                //box.className="b2";
                //addClass(box,"b2");
                //removeClass(box,"b2");
                toggleClass(box,"b2");
            }
            function addClass(obj,cn){
                obj.className+=" "+cn;
            }
            function hasClass(obj,cn){
                //判断obj中是否有cn
                var reg=/\bb2\b/;
                return reg.test(obj.className);
            }
            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);
                }
            }
        }
    </script>
</head>
<body>
<button id="btn01">点击按钮修改属性</button>
<br/>
<br/>
<div id="box" class="b1"></div>
</body>
</html>

在这里插入图片描述

到处是知识盲区~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-05-17js中类的操作（addClass，removeClass，toggleClass）

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .b1{ width: 100px; height: 100px; background-color: red; }
复制链接

扫一扫