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