背景
- HTML5中增加了很多属性，我们使用 data-* 属性来嵌入自定义数据。也就是说这个data-*是可以用来存储数据的，data-的后面紧跟自己起的一个变量名，然后后面赋予一个值，这个值就会被存储起来。然后获取数据通过js来实现。
用法
- HTML标签中使用data-* 属性嵌入数据
<!DOCTYPE html> <html> <body> <ul> <li onclick="showDetails(this)" id="owl" data-animal-bird="bird">Owl</li> <li onclick="showDetails(this)" id="salmon" data-animal-fish="fish">Salmon</li> <li onclick="showDetails(this)" id="tarantula" data-animal-spider="spider">Tarantula</li> </ul> </body> </html>
- js中获取
- 获取方式一：通过dataset.XXX获取
<script> function showDetails(animal) { var animalBird = animal.dataset.animalBird; console.log(animalBird); //bird var animalFish = animal.dataset.animalFish; console.log(animalFish); // fish var animalSpider = animal.dataset.animalSpider; console.log(animalSpider); //spider } </script>
- 获取方式二：通过getAttribute("XXX")获取
<script> function showDetails(animal) { var animalBird= animal.getAttribute("data-animal-bird"); console.log(animalBird);--bird var animalFish = animal.getAttribute("data-animal-fish"); console.log(animalFish );--fish var animalSpider = animal.getAttribute("data-animal-spider"); console.log(animalSpider );--spider } </script>
- Next
- 获取方式一：通过dataset.XXX获取
注意事项
- js中使用dataset.XXX获取标签中自定义属性值时，标签中的属性值XXX中不可以包含特殊字符（‘-’除外）。
- js中使用dataset.XXX获取标签中自定义属性值时，如果标签中的属性值XXX中包含字符‘-’，需要使用驼峰式获取自定义变量值。
- 举例
- 不包含‘-’
<html> <body> <ul> <li onclick="showDetails(this)" id="owl" data-animalbird="bird">Owl</li> </ul> </body> </html> <script> function showDetails(animal) { var animalBird = animal.dataset.animalbird; console.log(animalBird); //bird } </script>
- 包含‘-’
<html> <body> <ul> <li onclick="showDetails(this)" id="owl" data-animal-bird="bird">Owl</li> </ul> </body> </html>
<script> function showDetails(animal) { var animalBird = animal.dataset.animalBird; //驼峰式命名，否则报错undefined console.log(animalBird); //bird } </script>
- 不包含‘-’
- Next