js实现addClass,removeClass

最新推荐文章于 2024-05-16 17:47:24 发布

HaahLeel

最新推荐文章于 2024-05-16 17:47:24 发布

阅读量728

点赞数

CC 4.0 BY-SA版权

分类专栏： miaov 笔记

本文链接：https://blog.youkuaiyun.com/NewStart_lh/article/details/46918823

miaov 笔记专栏收录该内容

21 篇文章

订阅专栏

本文展示了一段使用JavaScript实现的HTML元素动态样式切换代码，包括添加和移除类名的功能，通过事件监听实现了元素样式的实时变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("box");
            addClass(oDiv, "box1");
            removeClass(oDiv, "box1");
            function addClass(obj, className){
                if(obj.className == ''){    //判断元素是否存在className
                    obj.className = className;   //如果元素不存在className 直接赋值添加即可
                }
                else{
                    /*如果元素存在className 则有两种情况：
                        1：存在想要添加的className
                        2：不存在想要添加的className
                    */


                    var arrClass = obj.className.split(' '); //将所有className 放在数组中

                    if(isElement(arrClass, className) == -1){  //如果不存在想要添加的className 直接累加；
                        obj.className += " " + className;
                    }
                    //如果存在就什么都不用做
                }
            }

            function removeClass(obj, className){
                if(obj.className != ''){   //判断className是否存在；
                    var arrClass = obj.className.split(' ');    //如果存在，同样存入数组
                    var _index = isElement(arrClass, className);  //判断你要删除的className是否存在，并取到返回值
                    //alert(_index+arrClass)
                    if( _index != -1){
                        arrClass.splice(_index,1);  //从数组中去掉重复的className
                        obj.className = arrClass.join(' ');   //把剩下的className 重新赋值
                    }
                }
            }
            function isElement(arr, v){
                for(var i = 0; i < arr.length; i++){
                    if(arr[i] == v)
                        return i;
                }
                return -1;
            }
        }
    </script>
</head>
<body>
    <div class="box box1" id="box">div</div>
</body>
</html>