微信小程序H5——自定义属性data-*

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

背景

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>

注意事项

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>