data-* 属性包括两部分:

属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符;

属性值可以是任意字符串;

注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。

与jQuery的.data()不是一个概念。

在获取自定义属性的值时,使用dataset属性,然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性,用于和data-*配合使用。

需要注意:

1)如果data-后面包含了“-”,例如 date-e-name,"-"会去掉,并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。

2)如果data-后面的单词有大写,例如 myName,将会转存成小写 myname。这里就不理解为什么会转换成小写了,JSON Object的key是区分大小写的。

3)如果你想删除一个data-*属性,请使用 delete dataset.cname或者dataset.cname=null。

HTML5中的data-*属性的更多相关文章

  1. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  2. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  3. Vue组件中的data属性

    Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...

  4. html5中的全局属性

    在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...

  5. HTML5中class选择器属性的解释

    设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...

  6. 测试开发之前端——No4.HTML5中的事件属性

    HTML5的事件属性. 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload ...

  7. 测试开发之前端——No3.HTML5中的标准属性

    HTML5的标准属性 属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contentedit ...

  8. Vue2 实例中的 data 属性三种写法与作用:

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...

  9. 辛星浅析html5中的role属性

    我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...

  10. Vue2实例中的data属性三种写法与作用

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app ...

随机推荐

  1. P 1023 组个最小数

    转跳点:

  2. 洛谷 P1470 最长前缀 Longest Prefix

    题目传送门 解题思路: 其实思路没那么难,就是题面不好理解,解释一下题面吧. 就是在下面的字符串中找一个子串,使其以某种方式被分解后,每部分都是上面所给集合中的元素. AC代码: #include&l ...

  3. BZOJ:2815: [ZJOI2012]灾难

    题解: 构造灭绝树: x指向的点表示x的祖先死亡则x死亡 动态LCA: 可以用LCT维护或直接更新倍增数组 最后统计子树点的个数 坑: 我还不会序列型Toposort #include<iost ...

  4. Axure下载,附注册码

    下载地址:https://www.axure.com.cn/3510/ 汉化教程:https://www.axure.com.cn/2616/ 注册码: Axure RP 8.1.0.3377--可用 ...

  5. [NOIP2009普及]分数线划定 T2 排序

    Description 世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A 市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根据计划录取人数的 ...

  6. 实验吧Web-易-简单的sql注入之3(报错的sql盲注之exp)

    题目提示是报错注入,于是就用盲注技巧来注入. 这里注入时发现floor,extractvalue,updatexml被吃掉了,用exp可以注入成功.(记住大小写绕过等技巧) 1.爆库 ' or exp ...

  7. 给指定的div增加滚动条

    这次的需求是给一个指定的div(里面有个table表格)增加上下.左右的滚动条 通过查找资料后找到了一个可用的方法,代码如下: <!--div比table大小要小才会显示--> <d ...

  8. consul集群配置

    consul agent -server -bootstrap-expect 1 -data-dir /etc/consul -node=consul1 -bind=ip1 -ui -client=0 ...

  9. 吴裕雄--天生自然C++语言学习笔记:C++ 注释

    程序的注释是解释性语句,可以在 C++ 代码中包含注释,这将提高源代码的可读性.所有的编程语言都允许某种形式的注释. C++ 支持单行注释和多行注释.注释中的所有字符会被 C++ 编译器忽略. C++ ...

  10. Java Web应用的加载过程

    在介绍Spring IoC和MVC的加载前,用这篇小文章简单地记录下,最简单的web应用的加载过程. 一.从最简单的web应用出发 使用Eclipse直接创建一个Dynamic Web Project ...