HTML - 标签自定义属性

最新推荐文章于 2024-06-12 22:18:50 发布

cjn.

最新推荐文章于 2024-06-12 22:18:50 发布

阅读量1.4w

点赞数 21

分类专栏：前端

本文链接：https://blog.csdn.net/chenjineng/article/details/108131054

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cjn.

关注关注

21
点赞
踩
43

收藏

觉得还不错? 一键收藏
3
评论
HTML - 标签自定义属性

html标签中，除了标准的属性名外，还可以自定义属性名，下面看下两种自定义属性的使用1.自定义属性名<body> <button desc="this is a button">Click me!</button> <script> var btn = document.querySelector('button') console.log(btn.getAttribute('desc')) // 获取属性值 b
复制链接

扫一扫