关于html5中自定义属性的介绍-木庄网络博客

本文摘自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来获取

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', '埃隆 马斯克')

相关视频教程推荐：html5视频教程

以上就是关于html5中自定义属性的介绍的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

HTML5 canvas中绘制字体与图片以及图形模糊问题解决

HTML5有哪些清空画布的方法

详细介绍h5弹性盒布局的使用（父容器属性）