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