属性补充操作-dataset操作自定义属性-修改-新增-删除

最新推荐文章于 2024-04-11 22:06:30 发布

喵帕斯_喵太

最新推荐文章于 2024-04-11 22:06:30 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115977245

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-属性补充操作-dataset操作自定义属性-修改-新增-删除

<body>
    <ul>
        <!-- li如果自带下标的话：用起来就方便了 -->
        <li data-index="10" class="item">隔壁老王1</li>
        <li data-index="1" class="item">隔壁老王2</li>
        <li data-index="2" class="item">隔壁老王3</li>

        <!-- 自定义属性：浏览器不会解析（不知道解析了能干嘛 -->
    </ul>

    <script>
        // 获取元素
        let li = document.querySelector('.item')

        // js提供了一个dataset对象，获取所有的以data-开头的自定义属性
        console.log(li.dataset)

        // 属性自动去掉了前缀：data-

        // 获取属性：元素.dataset.不带前缀的自定义属性
        console.log(li.dataset.index)   // 更符合面向对象（对象操作）

        // 修改：一样的操作
        li.dataset.index = 100

        // 新增：一样的操作，不用考虑data-（自带小驼峰）
        li.dataset.defaultColor = 'red'
        // 自动将小驼峰转成中划线（设置），获取也自动将中划线转成小驼峰

        // 删除：delete
        delete li.dataset.index
    </script>
</body>

注意：

1.自定义属性：浏览器不会解析
2.js提供了一个dataset对象，获取所有的以data-开头的自定义属性
2.1.属性自动去掉了前缀：data-
2.2.获取属性：元素.dataset.不带前缀的自定义属性
3.新增：不用考虑data-（自带小驼峰）–自动将小驼峰转成中划线（设置），获取也自动将中划线转成小驼峰
4.删除：delete

喵帕斯_喵太

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
属性补充操作-dataset操作自定义属性-修改-新增-删除

01-属性补充操作-dataset操作自定义属性-修改-新增-删除<body> <ul>  <li data-index="10" class="item">隔壁老王1</li> <li data-index="1" class="item">隔壁老王2</li> <li data-index
复制链接

扫一扫