js——className专题

最新推荐文章于 2024-03-23 18:34:55 发布

のdestiny

最新推荐文章于 2024-03-23 18:34:55 发布

阅读量690

点赞数

分类专栏： js专题文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42012745/article/details/121605413

版权

js专题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

className

在JS中，我们可以通过  元素名.className  来获取和设置类名。但是，当className中类名较多，
我们需要删除其中一个类名时，就需要先将获取到的类名字符串通过空格转成数组，然后用indexOf判断
类名的索引值，最后通过splice方法删除

例： 点击删除div中box的class名  
    <body>
        <div class="a b c box d e f">
        </div>
        <button>点击</button>
        <script>
            var divEle = document.querySelector("div");
            var btnEle = document.querySelector("button");
            btnEle.onclick = function () {
                var str = divEle.className ; 
                divEle.className = delEle( str , 'box' );
                console.log(divEle);
            }
            console.log(divEle);
            function delEle ( str , e ){
                var arr = str.split(" ");
                var a = arr.indexOf(e);
                arr.splice(a,1); 
                var strA = arr.join(" ");
                return strA ; 
            }
        </script>
    </body>
这里我们封装了一个方法，传入了获取到的divEle元素className的值，然后将字符串和要删除的属性值放到方法中，返回的是删除了该属性值之后的字符串，最后将这个字符串重复赋值给divEle元素className。这种做法比较麻烦。

H5提供给我们的方法

在H5中，元素身上有一个叫做classList的属性，里面包含了元素身上所有的类名，以下就是classList提供的方法操作类名

    1.add();    添加类名
        语法：  元素名.classList.add("需要添加的类名");
        例：    divEle.classList.add("box");  //在div元素中将box属性值添加到class类名中
    
    2.remove();  移除类名
        语法：  元素名.classList.remove("box");
        例：    divEle.classList.remove("box"); //在div元素中将box值属性从class类中移除

    3.toggle();  切换类名
        语法:   元素名.classList.toggle("要切换的类名");
     --注--   当元素有这个类名的时候，就做删除操作；
              当元素没有这个类名的时候，就做添加操作

    例1:用toggle实现简单的灯泡效果  点击页面，亮，再点击就熄灭。
        <head>
            <title>Document</title>
            <style>
                div {
                    margin: 10px auto;
                    width: 400px;
                    height: 400px;
                    border-radius: 50%;
                    background-color: #ccc;
                }
                .display {
                    background-color: coral;
                }
            </style>
        </head>
        <body>
            <div>
            </div>
            <script>
                var divEle = document.querySelector("div");
                document.onclick = function () {
                    divEle.classList.toggle("display");
                }
            </script>
        </body>

    例2.实现简单联动效果   可用js来实现简单的hover效果
    <head>
        <style>
            div {
                width: 100%;
                height: 100px;
                background-color: cyan;
                color: red;
                position: absolute;
                top: -100px;
                left: 0px;
                transition: top 0.5s linear;
            }
            .display {
                top: 0px;
            }
            button {
                margin: 100px;
            }
        </style>
    </head>
    <body>
        <div class="display">
            我是p标签
        </div>
        <div></div>
        <div></div>
        <button>
            按钮
        </button>
        <script>
            var divEles = document.getElementsByTagName("div")[0];
            var divEle = document.querySelector("div");
            var divEles2 = document.querySelectorAll("div")[0];
            var btnEle = document.querySelector("button");
            btnEle.onmouseenter = function () {
                divEle.classList.toggle("display");
            }
            btnEle.onmouseleave = function () {
                divEle.classList.toggle("display");
            }
        </script>
    </body>

のdestiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js——className专题

className在JS中，我们可以通过元素名.className 来获取和设置类名。但是，当className中类名较多，我们需要删除其中一个类名时，就需要先将获取到的类名字符串通过空格转成数组，然后用indexOf判断类名的索引值，最后通过splice方法删除例：点击删除div中box的class名 <body> <div class="a b c box d e f"> </div> &l
复制链接

扫一扫

专栏目录