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. Vue 获取时间戳返回自定义时间格式

    直接在Vue全局函数定义: Vue.prototype.padLeftZero = function(str) { return ('00' + str).substr(str.length); }; ...

  2. 自定义checkbox,redio等

    直接上代码: 看的懂看,看不懂拉到. .messageState li {list-style: none;float: left;padding-right:30px;font-size: 16px ...

  3. 自己整理的常用SQL Server 2005 语句、

    --创建数据库 create database 数据库 go --打开数据库 use 数据库 --删除数据库 drop database 数据库 Go --创建数据表 create table 数据表 ...

  4. CCCC 红色警报

    题意: 战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个 ...

  5. POJ 2186:Popular Cows Tarjan模板题

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 25945   Accepted: 10612 De ...

  6. MySQL读写分离如何实现?

    主要说下读写分离, 当我们的数据量很大时,数据库服务器的压力变大,这时候我们需要从架构方面来解决这一问题,在一个网站中读的操作很多,写的操作很少,这时候我们需要配置读写分离,把读操作和写操作分离出来, ...

  7. MySQL硬核干货:从磁盘读取数据页到缓冲池时,免费链表有什么用?

    1.数据库启动的时候,是如何初始化Buffer Pool的? 现在我们已经搞明白一件事儿了,那就是数据库的Buffer Pool到底长成个什么样,大家想必都是理解了 其实说白了,里面就是会包含很多个缓 ...

  8. maven项目集成Quartz定时任务框架,实现批处理功能

    一.Quartz简介 主要做定时任务,即:在指定时间点或时间段,执行某项任务,可设置执行次数.时间间隔等. 二.Springcloud简介 对比传统的.庞大的.复杂的.以ssm或ssh为框架的web项 ...

  9. .net APP接口

    编写APP接口首先要搭建测试环境,在实际开发中APP对于大多数公司来说都是选择外包,并不是公司内部人员负责,遇到事情不可能时时进行沟通和交流,也不能写每一个接口都要双方及时确认.个人经历是双方确认AP ...

  10. 【Python】关于import QtCore报错的处理方法

    刚开始学习使用PyQT,但总碰到一些小挫折 比如 import Pyqt成功 而 from PyQt5 import QtCore, QtGui, QtWidgets却报错,找了半天终于找到资料,原因 ...