• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [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>
    • 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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序修改radio的大小发布时间:2022-07-18
下一篇:
解决小程序弹出层滚动穿透的问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap