html5 data-* 自定义属性有什么不同。

Question

<li data-animal="fish">Salmon</li> 和<li animal="fish">Salmon</li> 新出的html5自定义属性和普通的定义属性有什么不同，都是定义属性。

Answer 1

1.规范性
2.有专门的接口dataset

Answer 2

如楼上所说，所以属性的访问方式不同。

<li data-animal="fish" id="hello">Salmon</li>
<li animal="fish" id="hi">Salmon</li>

var hello = document.getElementById("hello");
var hi = document.getElementById("hi");

// 获取id为hello的元素的data-animal属性
console.log(hello.getAttribute("data-animal")); // "fish"
console.log(hello.dataset.animal); // "fish"

// 获取id为hi的元素的animal属性
console.log(hi.getAttribute("animal")); // "fish"

Answer 3

在IDE里面, 有data-前缀的不会报警告.

Answer 4

一个是h5标准支持的，有特定的方法去取，去设置什么的。