zoukankan      html  css  js  c++  java
  • 微信小程序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
  • 相关阅读:
    5分钟速成C++14多线程编程
    Vue+element UI穿梭框使用
    element后台项目列表删除最后一项显示无数据
    vue+element 列表一列条件渲染
    百分比布局实现div自动换行
    store.js(一款好用的本地存储插件)的使用
    Vue开发h5或者小程序由px转换rem
    Vue中使用android和ios手机打开相机并选择相册功能和图片旋转问题
    js正则表达身份证姓名和身份证号码
    Vue中h5三个下拉框实现省级联动
  • 原文地址:https://www.cnblogs.com/zuiyue_jing/p/12155772.html
Copyright © 2011-2022 走看看