<li data-animal="fish">Salmon</li>
and<li animal="fish">Salmon</li>
New What is the difference between html5 custom attributes and ordinary defined attributes? They are both defined attributes.
为情所困2017-07-05 09:57:59
As mentioned above, the access methods of properties are different.
<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"
ringa_lee2017-07-05 09:57:59
In the IDE, no warning will be reported if there is a data- prefix.