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;
}