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

时间：2020-01-06 21:02:12 阅读：149 评论：0 收藏：0 [点我收藏+]

标签：detail UNC 驼峰 spider str tar 否则使用微信小程序

背景

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-*

标签：detail UNC 驼峰 spider str tar 否则使用微信小程序

原文地址：https://www.cnblogs.com/zuiyue_jing/p/12155772.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行