本文摘自PHP中文网,作者V,侵删。

定义
H5为我们提供了以 "data-" 为前缀定义需要的属性即可设置自定义属性。
1 2 | < div id = "box1" data-name = "Musk" ></ div >
< div id = "box2" data-full-name = "Elon Musk" ></ div >
|
(推荐教程:H5教程)
获取
使用H5自定义属性对象dataset来获取
1 2 3 4 5 6 7 8 | 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
|
设置
1 2 3 4 5 | let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
box1.dataset.name = '马斯克'
box2.setAttribute('data-full-name', '埃隆 马斯克')
|
相关视频教程推荐:html5视频教程
以上就是关于html5中自定义属性的介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5新特性之webrtc详解
如何使用HTML5 canvas绘制文字的轮廓
HTML5中常用交互元素实现的代码实例
h5移动端各种各样的列表的制作方法(五)
利用HTML5实现文件异步上传功能代码实例
h5链接的使用
h5实现桌面通知
看HTML5的七大优势“逼宫”app
HTML5 canvas基本绘图之绘制矩形
基于HTML5的web跨设备超声波通信方案详解
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于html5中自定义属性的介绍