HTML data-* 自定义属性

HTML data-* 自定义属性

data-*是HTML5新添加的全局属性，通过它我们可以自定义属性，就像id，class等属性一样。我们可以使用JavaScript来操作这些属性。

<div id="mydiv" data-foo="bar">

我们可以用下面这些方法来操作它。

（1）dataset

通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。使用这种方法时，不是使用完整的属性名，应该去掉data- 前缀。

var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'

(2)除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。

var n = document.getElementById('mydiv');
n.getAttribute("data-foo") // bar
n.setAttribute('data-foo','baz')

注意:data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。而且，属性名不应该使用A到Z的大写字母