自定义属性：Attribute/`getAttribute` `setAttribute` `removeAttribute`（一般不用这种,建议用dataset）

最新推荐文章于 2023-04-17 09:54:19 发布

喵帕斯_喵太

最新推荐文章于 2023-04-17 09:54:19 发布

阅读量125

点赞数

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

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

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

`getAttribute('属性名')` `setAttribute('属性名','属性值')：设置属性` `removeAttribute('属性名')：删除属性`

<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('li')           // 1个li

        console.log(li)

        // 点语法操作属性
        console.log(li.className, li['className'])

        // 自定义属性：标准方式不能操作
        console.log(li['data-index'])

        // 元素的所有属性：都可以被一个对象拿到：attributes
        console.log(li.attributes)
        // 一般没用

        // 自定义属性提供了一套API操作
        // getAttribute('属性名')：获取值
        console.log(li.getAttribute('data-index'))
        // setAttribute('属性名','属性值')：设置属性
        li.setAttribute('data-index', 100)  // 修改
        li.setAttribute('data-src', 'images/bgs.png')
        // removeAttribute('属性名')：删除属性
        li.removeAttribute('data-index')

        // 自定义属性一定要用吗？不一定，绝大部分的时候不用：如果有数据，不希望用户看到，但是未来要用，可以使用自定义属性来保存数据
    </script>
</body>

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义属性：Attribute/`getAttribute` `setAttribute` `removeAttribute`（一般不用这种,建议用dataset）

getAttribute('属性名') setAttribute('属性名','属性值')：设置属性 removeAttribute('属性名')：删除属性<body> <ul>  <li data-index="10" class="item">隔壁老王1</li> <li data-index="1" class="item"&
复制链接

扫一扫