html5-类名的操作-属性

浅浅的花香味﹌ 2022-07-14 00:42 151阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
            width: 300px;
            height: 100px;
            margin:10px auto;
            border: 1px solid #000;
            }
            .active{
            border-radius: 50%;
            background-color: pink;
            }
        </style>
    </head>
    <body>
            <div class="box box1 "></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
    
    
            <button>切换</button>
    
            <script>
                var box1=document.querySelector('.box1');
                //        box1.className="";
                //        juqery
                //        addClass()  removeClass()  hasClass()  toggleClass();
    
                //        h5新增的操作类名的方式 和jq一样好用
    
    
                //        获取第一个盒子
                var box1= document.querySelector(".box1");
                //       添加类名
                box1.classList.add('active')
                //        alert('ok');
                //        删除类名
                //        box1.classList.remove('active');
                //         contains:包含
                //        判断是否包含某个类名  返回结果 true/false
                //        contains 包含 contains 包含 list清单 classlist类名清单
                //        判断box1的类名是否包含 active 返回结果为bool类型
                var f=box1.classList.contains('active');
    
                console.log(f);
    
    
                //        切换类名
                //        获取button元素 并且绑定点击事件
                document.querySelector('button').οnclick=function(){
            //           判断 是否有 active属性 有的话就添加 没有就删除
                    document.querySelector('.box3').classList.toggle('active');
                }
                //
    
    
    //---------------------自定义属性---------------------------------
                            
                        <div class="box" title="盒子" data-my-name="zs"  data-content="我是一个div">div</div>
                            
                        <script>
                var box=document.querySelector('.box');
                //        js里面的自定义属性
                //        box.index=100;
    
                //        console.log(box.className);
                //        console.log(box.title);
    
                //        如何获取标签的自定义属性
                //        console.log(box.dataname);
                //    自定义的属性 需要通过 dateset[]方式来获取
    
                //        console.log(box.dataset['content']);
    
                //        设置自定义属性的值
    
                var num=100;
                num.index=10;
                box.index=100;
                box.dataset['content']='aaaa';
                //        data-my-name="zs" 如何获取
                console.log(box.dataset['myName']);
    
    
            </script>
    </body>
    </html>