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. Egret Engine 2D - 显示对象

        alpha:透明度 width:宽度 height:高度 rotation:旋转角度 scaleX:横向缩放 scaleY:纵向缩放 skewX:横向斜切 skewY:纵向斜切 visible ...

  2. Spring的数据源配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. 大数据高可用集群环境安装与配置(08)——安装Ganglia监控集群

    1. 安装依赖包和软件 在所有服务器上输入命令进行安装操作 yum install epel-release -y yum install ganglia-web ganglia-gmetad gan ...

  4. ORA-00911

    直接在PLSQL运行没问题,在java程序里面运行就报错:ORA-00911 select * from mytable; 亲测,改为: select * from mytable 看到区别没,去掉: ...

  5. Java UDP发送与接收

    IP地址?端口号?主机名? 什么是Socket? 什么是UDP? 什么是TCP? UDP和TCP区别? 以上问题请自行百度,有标准解释,此处不再赘述,直接上干货! 实例: 发送端: public cl ...

  6. 第二阶段scrum-1

    1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 注册登陆界面功能正在实装,消息收发功能正在制作 雷达界面已经完成.

  7. 利用IIS6提权获得管理员权限

    IIS6也是一个比较古老的提权EXP了,是通过利用WMI的权限来执行命令. 目标机:漏洞巨多的Win2003 下面说一下通过IIS6在已用菜刀连接上的服务器上运用IIS6获得管理员权限的过程. 1.将 ...

  8. 寒假day21

    标签模块报了一些错误,暂时没有找出原因.刷了一些面试题

  9. Python Learning Day3

    爬虫练习 说是练习,实际是尝试了一些还没有具体了解的方式吧hhhhh' 基于urllib实现 import urllib.request import re url="https://www ...

  10. 证书打印CSS知识点总结

    需求: 1.证书内容动态填充: 2.证书背景图不要求打印,只为展示作用: 3.打印内容兼容屏幕分辨率: 实现: <!-- 外层div宽度为背景图片宽 --> <div style=& ...