js类的操作

最新推荐文章于 2023-10-08 18:57:39 发布

喵俺第一专栏

最新推荐文章于 2023-10-08 18:57:39 发布

阅读量334

点赞数 1

分类专栏： # Html+css+js项目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dengfengling999/article/details/122779458

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

其中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>

结果：

点击按钮：

喵俺第一专栏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js类的操作

其中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-equ
复制链接

扫一扫