html5自定义属性data详解及使用方法

以下面的html作为案列：

获取data-属性：

<ul>    <li class="first" data-animal-type="bird">Owl</li>    <li data-animal-type="fish">Salmon</li>     <li data-animal-type="spider">Tarantula</li> </ul>

通过js的getAttribute()和setAttribute()来获取和设置data-属性，以下是js代码：

var ul=document.getElementsByTagName("ul")[0];var lis=ul.getElementsByTagName("li");for(var i=0;i<lis.length;i++){    var a=lis[i].getAttribute("data-animal-type");    console.log(a)}

以上代码会依次输出bird、fish、spider，如下图：

设置data-属性：

<ul>    <li>four</li> </ul>

js代码

var ul=document.getElementsByTagName("ul")[0];var lis=ul.getElementsByTagName("li");lis[0].setAttribute("data-animal-type","http://www.jb51.net");

设置data-属性的样式：

<ul>    <li class="first" data-animal-type="bird">Owl</li>    <li data-animal-type="fish">Salmon</li>     <li data-animal-type="spider">Tarantula</li> </ul>

.first[data-animal-type="bird"]{    color: red;}