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. MFC工程合并

    假使有两个工程,分别为工程A和工程B. 第一步:把A中.rc文件中的 两张图中间的对话框资源拷贝出来,粘贴到B工程中的.rc资源文件中,也是两张图中间 第二步:打开工程-----VIEW------R ...

  2. java课程课后作业190530之用户体验评价

    每个人评价一下大家手头正在使用输入法或者搜索类的软件产品. 从用户界面.记住用户选择.短期刺激.长期使用的好处坏处.不要让用户犯简单的错误四个方面发表一篇博客. 输入法:苹果自带的输入法 用户界面:简 ...

  3. 苹果maccms网站漏洞进行修复解决方法教程

    上期发现视频名称中包含木马文件 然后教大家使用标签进行过滤 {$vo.vod_name|mac_filter_html} 可是最近发现现在黑客行为是全字段挂马,修改数据字段格式挂马,多重嵌套挂马. 真 ...

  4. POJ-3258 (最小值最大化问题)

    POJ - 3258 River Hopscotch Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & ...

  5. 51Nod1085 0-1背包(一维和二维数组实现)

    背包是典型的动态规划问题,关于背包问题的详解,推荐博客:点击打开链接(这篇博客有点错误,代码for循环里错了,不过讲解 的很详细) 题目如下: 在N件物品取出若干件放在容量为W的背包里,每件物品的体积 ...

  6. spring boot rest 接口集成 spring security(1) - 最简配置

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  7. JS事件-对象监视事件,事件触发函数

    写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click()                      鼠标单击 dblclick()  ...

  8. [GXYCTF2019]BabySQli

    0x00 知识点 emmm这道题目就是脑洞得大,能猜后端源码 0x01 解题 查看源码: base32,base64解码得到 select * from user where username = ' ...

  9. 使用html画爱心

    <!DOCTYPE html"> <html> <head> <meta http-equiv="Content-Type" c ...

  10. Win10 MySQL5.7中文乱码问题

    https://blog.csdn.net/hh___56789/article/details/87900923 最好把 utf8 都换成utf8mb4 ,以免以后遇到意想不到的错误.utf8有漏洞 ...