HTML - 标签自定义属性

最新推荐文章于 2025-07-24 11:48:29 发布

原创最新推荐文章于 2025-07-24 11:48:29 发布 · 1.6w 阅读

47 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了HTML中自定义属性的使用方法，包括普通自定义属性和data-*属性的创建、读取及修改，展示了如何利用这些特性增强网页元素的功能性和可维护性。

该文章已生成可运行项目，

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

html标签中，除了标准的属性名外，还可以自定义属性名（属性值为String类型），下面看下两种自定义属性的使用

1.自定义属性名

<body>
  <button desc="this is a button">Click me!</button>
  
  <script>
    var btn = document.querySelector('button')
    console.log(btn.getAttribute('desc')) // 获取属性值
    btn.setAttribute('tip', 'please click button') // 设置属性值
  </script>
</body>

2.data-*自定义属性名

这种方式需要在自定义属性名前面加上data-，获取/赋值都需要通过dataset，这种方式操作更为简单，所有data-*属性都存放在dataset中

<body>
  <button data-desc="this is a button">Click me!</button>
  
  <script>
    var btn = document.querySelector('button')
    console.log(btn.dataset.desc) // 获取属性值
    btn.dataset.tip = 'please click button' // 设置属性值
  </script>
</body>