html5-类名的操作-属性

最新推荐文章于 2023-01-04 22:47:13 发布

约德尔蒙

最新推荐文章于 2023-01-04 22:47:13 发布

阅读量1.9k

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/gyq04551/article/details/53263462

版权

Html5 专栏收录该内容

6 篇文章 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');
            }
            //


//---------------------自定义属性---------------------------------
                        <!-- 给标签添加自定义属性 必须以data-开头 -->
                    <div class="box" title="盒子" data-my-name="zs"  data-content="我是一个div">div</div>
                        <!-- made-in-china-->
                    <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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5-类名的操作-属性

.box{ width: 300px; height: 100px; margin:10px auto; border: 1px solid #000; } .active{ border-radius: 50%; background-color: pink;
复制链接

扫一扫

专栏目录