在html5中我們可以通過data-來設定我們需要的自定義屬性，進行資料存放
root
我們先建立乙個id為root的div元素，自定義屬性age值為25，然後我們對其自定義屬性進行操作
let root = document.getelementbyid('root');
console.log(root.dataset.age); // 25
root.dataset.name = 'bigzmc';
root.dataset.gender = 'male';
console.log(root.dataset); //
delete root.dataset.gender; // 語法和object刪除某一屬性相同
console.log(root.dataset); //
console.log(root);
// 可以看到,自定義name屬性已經在該dom元素中
由此可看出,dataset是乙個domstringmap物件,類似json的鍵值對。所有自定義元素data-都儲存在dataset中，還有乙個需要注意的地方是，如果自定義屬性為兩個單詞組成，如data-hello-world,那麼在dataset中的key應該為helloworld,即駝峰命名的形式。
當乙個element上的資料很多的話，通過遍歷attribute的name方法比較複雜，此時採用dataset一目了然，先上**
兩種方式獲取的結果相同,但是使用dataset**量大幅減少
這裡需要注意的是,getattribute()同樣可以獲取到dataset中的值;
console.log(root.getattribute('data-age')); // 25
root.setattribute('data-gender', 'male');
console.log(root.dataset); // domstringmap
以上**表示setattribute()和getattribute()都能操作dataset,說明dataset實際是attribute的乙個子集,只是命名特殊,只包含字首為data-的屬性。
css中可以通過屬性選擇器來對自定義屬性的元素進行渲染
[data-name]
[data-name='bigzmc']
參考部落格: html5 data-* 自定義屬性,html5自定義屬性物件dataset簡介
發布於 2018-12-19
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 可是，怎麼來讀取這些資料呢？...
自定義屬性 data
在html5中新增了data 的方式來自定義屬性，所謂data 實際上上就是data 字首加上自定義的屬性名，使用這樣的結構可以進行資料存放。使用data 可以解決自定義屬性混亂無管理的現狀。設定自定義屬性有如下2種方式。1 第一種方式是可以直接在 html 標籤上面書寫 h2 data weath...