Html5中自定義data特性

2021-06-25 16:30:18 字數 902 閱讀 2392

原文:

你可以去讀一下html5的詳細規範,但這個自定義data屬性的用法非常的簡單,就是你可以往html標籤上新增任意以 "data-"開頭的屬性,這些屬性頁面上是不顯示的,它不會影響到你的頁面布局和風格,但它卻是可讀可寫的。

下面的乙個**片段是乙個有效的html5標記:

some awesome data

可是,怎麼來讀取這些資料呢?你當然可以遍歷頁面元素來讀取你想要的屬性,但jquery已經內建了方法來操作這些屬性。使用jquery的.data()方法來訪問這些"data-*" 屬性。其中乙個方法就是 .data(obj),這個方法是在 jquery1.4.3版本後出現的,它能返回相應的data屬性。

舉個例子,你可以用下面的寫法讀取 data-myid屬性值:

var myid= jquery("#awesome").data('myid');

console.log(myid);

你還可以在"data-*" 屬性裡使用json語法,例如,如果你寫出下面的html:

你可以通過js直接訪問這個資料,通過json的key值,你能得到相應的value:

var gamestatus= jquery("#awesome-json").data('awesome').game;

console.log(gamestatus);

你也可以通過.data(key,value)方法直接給"data-*" 屬性賦值。乙個重要的你要注意的事情是,這些"data-*" 屬性應該和它所在的元素有一定的關聯,不要把它當成存放任意東西的儲存工具。

儘管"data-*" 是html5才出現的屬性,但jquery是通用的,所以,在非html5的頁面或瀏覽器裡,你仍然可以使用.data(obj)方法來操作"data-*" 資料。

HTML5自定義data屬性

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

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

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

html5的自定義data 屬性

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