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); // 25root.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’)); // 25root.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简介