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. Linux每日一练20200219

  2. UVA - 10791 Minimum Sum LCM(最小公倍数的最小和)

    题意:输入整数n(1<=n<231),求至少两个正整数,使得它们的最小公倍数为n,且这些整数的和最小.输出最小的和. 分析: 1.将n分解为a1p1*a2p2……,每个aipi作为一个单独 ...

  3. 21 ~ express ~ 前台内容分类展示

    一,前台 , views/main/index.html ,通过get传送给后台 思路 : 将栏目ID 传递给后台,后台根据 栏目的ID 返回相应的数据   {% if category == '' ...

  4. DevOps专题|玩转Kubernetes网络

    Kubernetes无疑是当前最火热的容器编排工具,网络是kubernetes中非常重要的一环, 本文主要介绍一些相应的网络原理及术语,以及kubernetes中的网络方案和对比. Kubernete ...

  5. Apache Spark:来自Facebook的60 TB +生产用例

    本文主要讲Facebook扩展spark替换hive的过程中积累的经验和教训. 浪尖整理翻译https://databricks.com/blog/2016/08/31/apache-spark-sc ...

  6. Android进阶——多线程系列之wait、notify、sleep、join、yield、synchronized关键字、ReentrantLock锁

    多线程一直是初学者最困惑的地方,每次看到一篇文章,觉得很有难度,就马上叉掉,不看了,我以前也是这样过来的.后来,我发现这样的态度不行,知难而退,永远进步不了.于是,我狠下心来看完别人的博客,尽管很难但 ...

  7. C#高级编程(第9版) 第10章 集合 笔记

    话说 虽然敲过好多代码, 但除了C++,一直没正眼瞧过其它语言.(没办法 谁叫C++既有oop又能自由控制内存呢) 今天 看公司老项目的src,c#的,linq+Dictionary的用法有感.所以找 ...

  8. 使用js检测页面是在electron app中运行还是在浏览器中运行

    <script type="text/javascript"> var userAgent = navigator.userAgent.toLowerCase() ){ ...

  9. POJ 1011:Sticks 经典搜索

    Sticks Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 128734   Accepted: 30173 Descrip ...

  10. 微信小程序返回页面传值

    一.通过url传递参数,但由于navigateTo无法跳转到导航页,所以无法往导航页传递参数 wx.navigateTo({ url: 'test?id=1' }) 二.通过wx.navigateBa ...