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简介