• H5 data-*容易忽略的问题


    H5添加了data-*属性,非常方便

    但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了

    测试代码如下:

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#btn2").click(function(){
        alert($("div").data("id"));
        alert($("div").data("Id"));
        alert($("div").data("otherId"));
        alert($("div").data("OtherId"));
        alert($("div").data("OTHERID"));
        var datas = $("div").data();
      });
    });
    </script>
    </head>
    <body>
    
    <button id="btn2">alert</button>
    <div  data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div>
    </body>
    </html>

    alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果:

    总结: 遵循标准写法

            1. data-* 所有字符要小写。

             2.多个单词采用横线隔开,例如data-other-id => otherId  读出来的属性会去掉横线并将首字母大写。

  • 相关阅读:
    053(二十五)
    053(二十四)
    053(二十三)
    053(二十二)
    053(二十一)
    053(二十)
    053(十九)
    053(十八)
    053(十七)
    单例设计模式
  • 原文地址:https://www.cnblogs.com/FlyLolo/p/7121619.html
Copyright © 2020-2023  润新知