1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div data-age="18" data-sex="男"></div>
通过data- 的方式添加的属性都会保存到DOM元素的dataset属性中。同时dataset也是一个对象。
<div data-age="18" data-sex="男"></div>
<script>
var div = document.querySelector("div");
console.log(div.dataset); //返回输出一个对象
console.log(div.dataset.age); //输出18
</script>
在设置属性时，可以使用大写字母，但是他会自动帮我们转化为小写字母。
在设置属性时，可以使用多个横杠隔。调用时，横杠要去掉，第二个横杠开始，每个横杠的首字母要大写。
<div data-foodMeat="牛肉" data-food-fruit="apple" data-food-fruit-meat="猪肉"></div>
<script>
var div = document.querySelector("div");
console.log(div.dataset.foodmeat);//输出牛肉
console.log(div.dataset.foodFruit);//输出apple
console.log(div.dataset.foodFruitMeat);//输出猪肉
</script>
|
