js——className专题

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值