HTML5的自定义属性

发表于 分类于 / Changyan：

在 HTML5 中我们可以自定义属性，其格式为 data-*=""

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="demo" data-my-name="sw" data-age="10">
<script>
/*
  Node.dataset 是以对象形式存在的，当我们为同一个 DOM 节点指定了多个自定义属性时，
  Node.dataset 则存储了所有的自定义属性的值。
  */
var demo = document.querySelector("#demo");
//获取
//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
var name = demo.dataset['myName'];
var age = demo.dataset['age'];
//设置
demo.dataset['name'] = 'web developer';
<script/>

资源

mdn - data-*