当前位置：主页 > 查看内容

Html5之自定义属性(data-,dataset)

发布时间：2021-05-07 00:00| 有 位朋友查看

简介：定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById('box1');let box2 = document……

定义

H5为我们提供了以 "data-" 为前缀定义需要的属性即可设置自定义属性

<div id="box1" data-name="Musk"></div>
<div id="box2" data-full-name="Elon Musk"></div>

获取

使用H5自定义属性对象dataset来获取

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');

box1.dataset.name // Musk
box2.dataset.fullName // Elon Musk (驼峰)

box1.getAttribute('data-name') // Musk
box2.getAttribute('data-full-name') // Elon Musk

设置

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');

box1.dataset.name = '马斯克'
box2.setAttribute('data-full-name', '埃隆 马斯克')

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。


原文链接：https://m.jb51.net/html5/702537.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：移动端html5判断是否滚动到底部并且下拉加载 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐