攻城师 2019-06-29
在html5中我们可以通过data-
来设置我们需要的自定义属性,进行数据存放
<div id="root" data-age="25"> ROOT </div>
之后可以通过js脚本获取/设置自定义属性,也可以使用CSS属性选择器进行样式设置
我们先创建一个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,即驼峰命名的形式。
当一个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-
的属性。
css中可以通过属性选择器来对自定义属性的元素进行渲染
[data-name] { color: red; } [data-name='bigZMC'] { color: blue; }