html5 自定義屬性

1.data-*自定義屬性介紹

在html5中咱們能夠經過data-來設置咱們須要的自定義屬性，進行數據存放

<div id="root" data-age="25">
  ROOT
</div>

以後能夠經過js腳本獲取/設置自定義屬性，也能夠使用CSS屬性選擇器進行樣式設置

2.dataset基本操做

咱們先建立一個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); // {age: "25", name: "bigZMC", gender: "male"}
delete root.dataset.gender; // 語法和object刪除某一屬性相同
console.log(root.dataset); // {age: "25", name: "bigZMC"}
console.log(root); 
//  能夠看到,自定義name屬性已經在該dom元素中
//  <div id="root" data-age="25" data-name="bigZMC">
//    ROOT
//  </div>
console.log(root.dataset);

由此可看出,dataset是一個DOMStringMap對象,相似json的鍵值對。全部自定義元素data-都保存在dataset中，還有一個須要注意的地方是，若是自定義屬性爲兩個單詞組成，如data-hello-world,那麼在dataset中的key應該爲helloWorld,即駝峯命名的形式。

3.dataset的好處

當一個element上的數據不少的話，經過遍歷attribute的name方法比較複雜，此時採用dataset一目瞭然，先上代碼

let dataset = {};
for(let i = 0;i < root.attributes.length;i++) {
  let name = root.attributes[i].name;
  if(name.substring(0, 5) == 'data-') {
    dataset[name.substring(5)] = root.attributes[i].value;
  }
}
console.log(root.dataset, dataset);

兩種方式獲取的結果相同,可是使用dataset代碼量大幅減小
這裏須要注意的是,getAttribute()一樣能夠獲取到dataset中的值;

console.log(root.getAttribute('data-age')); // 25
root.setAttribute('data-gender', 'male');
console.log(root.dataset); // DOMStringMap {age: "25", name: "bigZMC", gender: "male"}

以上代碼表示setAttribute()和getAttribute()都能操做dataset,說明dataset實際是attribute的一個子集,只是命名特殊,只包含前綴爲data-的屬性。

4.自定義屬性在css中的應用

css中能夠經過屬性選擇器來對自定義屬性的元素進行渲染

[data-name] {
  color: red;
}
[data-name='bigZMC'] {
  color: blue;
}

參考博客: HTML5 data-* 自定義屬性,HTML5自定義屬性對象Dataset簡介