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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

小议Python列表和元组中的元素地址连续性

众所周知,在Python中字典和集合依赖元素哈希表来存储,并不存在传统意义上的所谓元素“顺序”,当然,如果需要一个有序的字典可以使用collections模块提...

36310
来自专栏阿炬.NET

Reflector、reflexil、De4Dot、IL指令速查表

3465
来自专栏Golang语言社区

Go基础系列:struct和嵌套struct

struct定义结构,结构由字段(field)组成,每个field都有所属数据类型,在一个struct中,每个字段名都必须唯一。

1552
来自专栏博客园

IL指令详细表

962
来自专栏mwangblog

python变量、语句

1654
来自专栏数据结构与算法

2277 爱吃皮蛋的小明

2277 爱吃皮蛋的小明  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 白银 Silver 题解  查看运行结果 题目描述 Descri...

2997
来自专栏chenjx85的技术专栏

leetcode-844-比较含退格的字符串(用vector取代stack)

给定 S 和 T 两个字符串,当它们分别被输入到空白的文本编辑器后,判断二者是否相等,并返回结果。 # 代表退格字符。

731
来自专栏lulianqi

IL指令详细

1293
来自专栏闻道于事

JavaScript深入浅出补充——(二)语句和严格模式,对象

三、语句和严格模式 JavaScript程序由语句组成,语句遵守语法规则。 例如:if语句,while语句,with语句等等…… ? block块语句 常用于组...

3024
来自专栏积累沉淀

JavaScript正则表达式

什么是正则表达式? 正则表达式也叫做匹配模式(Pattern),它由一组具有特定含义的字符串组成,通常用于匹配和替换文本。 在JavaScript脚本中,利...

2805

扫码关注云+社区

领取腾讯云代金券