html5自定義屬性data詳解及使用方法

以下面的html作為案列：

獲取data-屬性：

"first"

data
-animal
-type
="bird"
>owl
-animal
-type
="fish"
>salmon
-animal
-type
="spider"
>tarantula

var ul=document.getelementsbytagname("ul")[0];

var lis=ul.getelementsbytagname("li");
for(var i=0;ivar a=lis[i].getattribute("data-animal-type");
console.log(a)
}

設定data-屬性：

fourli>

ul>

var ul=document.getelementsbytagname("ul")[0];

var lis=ul.getelementsbytagname("li");
lis[0].setattribute("data-animal-type","");

"first"

data
-animal
-type
="bird"
>owl
-animal
-type
="fish"
>salmon
-animal
-type
="spider"
>tarantula

.first

[data-animal-type="bird"]

HTML5自定義data屬性

可能大家在使用jquery mobile時，經常會看到data role data theme等的使用，比如 通過如下 即可實現頁首的效果 通過手機瀏覽，效果如下 為什麼寫乙個data role header 就能實現底部為黑色 文字居中顯示的效果呢？我們寫乙個html頁面，自定義乙個data ch...

html5的自定義data 屬性

html5中新增了data 的方式來自定義屬性，所謂data 實際上上就是data 字首加上自定義的屬性名，使用這樣的結構可以進行資料存放。使用data 可以解決自定義屬性混亂無管理的現狀。data 有兩種設定方式，可以直接在html元素標籤上書寫 click here 可是，怎麼來讀取這些資料呢？...

HTML5新特性 自定義資料屬性data

html是允許我們自定義標籤和屬性的，我們一般經常用自定義屬性在介面儲存一些資料，類似於使用hidden控制項。可以看到我們能夠像操作html內建屬性 name 一樣，操作我們自定義的屬性 age 一些常見的前端框架比如angularjs使用了很多自定義的標籤和屬性，比如ng model，ng re...