微信小程序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>
      复制代码
    • Next

注意事项

  • 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
posted @   话·醉月  阅读(1483)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示