js对dom的class的操作

最新推荐文章于 2023-01-06 08:25:26 发布

2333!!!!!

最新推荐文章于 2023-01-06 08:25:26 发布

阅读量1.6k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122609247

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js对dom的class的操作</title>
    <!-- dom对类属性的操作:
    如果是js对style中某一个属性的修改,js每改变一次style属性 就得去重新渲染一次浏览器
    我们可以使用css的class 让js执行一次换多个属性优化
   -->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color:yellow;
            margin-top:10px;
        }
        .box_add{
            height: 400px;
            background-color:red;
        }
        .
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var change_box_add=document.getElementById("change_box_add");
            var box=document.getElementById("box");
            //cn是修改的类名
            function add_class(obj,cn){//使用函数对添加class 的方法进行封装
                //用正则表达式来测试他是否存在
                //因为我们是可以增加不同的class类所以传进来的类名不一样 就不能把正则表达式写死就得用创建对象的方式把类名拼接进去
                //用对象创建正则表达式需要注意转义字符
                //我们要检测是class的属性存在那必须是单独的字符串 相当于 独立的单词 就需要用到 正则表达式的单词边界(\b)专门检测是否单独包含这个单词
                let reg=new RegExp("\\b"+cn+"\\b");
                if(!reg.test(obj.className)){
                    //对他进行一个小增强看他的class属性中是否有增加的类,有就不动他没有就增加
                    obj.className=obj.className+" "+cn;
                }
            }
            change_box_add.onclick=function() {
                add_class(box, "box_add");
            }
            //删除类名
            var change_box_del=document.getElementById("change_box_del");
            function del_class(obj,cn){
                //与上面一样先判读他有没有需要删除的没有就不动有就删除
                let reg=new RegExp("\\b"+cn+"\\b");
                if(reg.test(obj.className)){//如果有就删除
                    obj.className =obj.className.replace(reg,"");
                }
            }
            change_box_del.onclick=function(){
                del_class(box,"box_add");
            }
            //修改类名
            var change_box_modify=document.getElementById("change_box_modify");
            function modify_class(obj,cn){
                //切换类 如果有类中有box_add就删除 没有添加
                let reg=new RegExp("\\b"+cn+"\\b");
                if(reg.test(obj.className)){
                    obj.className =obj.className.replace(reg,"");
                }else{
                    obj.className=obj.className+" "+cn;
                }
            }
            change_box_modify.onclick=function(){
                modify_class(box,"box_add");
            }
        }
    </script>
</head>
<body>
<button id="change_box_add">改变下方盒子的class属性添加按钮</button> <button id="change_box_del">改变下方盒子的class属性删除按钮</button>
<button id="change_box_modify">改变下方盒子的class属性切换按钮</button>
<div id="box" class="box"></div>
</body>
</html>

2333!!!!!

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js对dom的class的操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js对dom的class的操作</title> <!-- dom对类属性的操作: 如果是js对style中某一个属性的修改,js每改变一次style属性就得去重新渲染一次浏览器我们可以使用css的class 让js执行一次换多个属性优化 --.
复制链接

扫一扫