浅谈H5的data-*中容易被忽略的一个小问题

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家带来的内容是浅谈H5的data-*中容易被忽略的一个小问题。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

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

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

测试代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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 读出来的属性会去掉横线并将首字母大写。

以上就是浅谈H5的data-*中容易被忽略的一个小问题的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

h5可以用来干什么？

html5文件上传插件遇到的技术问题

html5中新特性之语义化标签的实例分析

html5中垂直上下居中的解决方案

html5 虚拟键盘出现挡住输入框怎么办

html5怎么实现图片转圈的动画效果

浅谈html5和html4之间的不同

html5的学习路线分析

h5的28个新特性的详细介绍

html5怎样做出图片转圈的动画效果

更多相关阅读请进入《h5》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...