本文摘自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中自定义属性的介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
h5实现多图片预览上传及点击可拖拽控件
值得一个的5个强大的HTML5api 函数
HTML5中关于音频与视频监听器应用的示例详解
HTML5在工作中主要干什么
HTML5实现上传图片预览效果代码
简单介绍HTML5中的文件导入
如何从javascript到typescript?
分享HTML5实现弹出框的效果示例
解决h5网页中用video标签无法播放mp4视频的方法
HTML5 表单、select 下拉、textarea多行文本的介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于html5中自定义属性的介绍