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

Posted 2021-03-18 话·醉月

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序H5——自定义属性data-*相关的知识，希望对你有一定的参考价值。

背景

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>

以上是关于微信小程序H5——自定义属性data-*的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序~自定义属性设置和获取（data-）

微信小程序中data-key属性：数据传输