HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀。

目的是为元素提供与页面渲染无关的信息、或者语义信息。这些属性名能够任意加入,仅仅要带上前缀 data- 开头就能够。

<div id="myid" data-appid="1" data-appname="csdn"></div>

加入属性这后能够通过 dataset 訪问自己定义属性,dataset 属性 是DOMStringMap  类型的实例。 也是一个 key : value 的键值对。

注冊:每个data-name  形式的属性 相应。 dataset 的 name 属性。

以上面的样例来说;

var div = document.getElementById("myid");
div.dataset.appid ===' 1'; //true
div.dataset.appname ==='nama';//true

能够设置自己定义属生的值:

div.dataset.appid = "100"

全栈JavaScript之路(十八)HTML5 自己定义数据属性的更多相关文章

  1. 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

    在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签 插入技术,能够直接插入html代码字符串,简单.高 ...

  2. 全栈JavaScript之路(十六)HTML5 HTMLDocument 类型的变化

    HTML5 扩展了 HTMLDocument, 添加了新的功能. 1.document.readState = 'loading' || 'complete'  //支持readyState 属性的浏 ...

  3. 全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML

    insertAdjacentHTML(),  这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...

  4. 全栈JavaScript之路(十四)HTML5 中与class属性相关的扩充

    1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 O ...

  5. 全栈JavaScript之路(十七)HTML5 新增字符集属性

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  6. 全栈JavaScript之路( 二十二 )IE 专有扩展——文档模式

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hatmore/article/details/37611911 ie8 引入了一个新的概念.&quo ...

  7. 全栈JavaScript之路( 二十五 )訪问元素的样式

    不论什么支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之相应. 这个style 对象是 CSSStyleDeclaration类型的实例,包括着html sty ...

  8. 全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hatmore/article/details/37658167 (一)DocumentType 类型 ...

  9. 全栈JavaScript之路(十)学习 DocumentFragment 类型 节点

    DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象.能够包括其他类型节点,并有能力訪问.操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器. ...

随机推荐

  1. paip.php 配置ZEND DEBUGGER 断点调试for cli..

    paip.php  配置ZENDDEBUGGER 断点调试for cli.. 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http:/ ...

  2. 【zigbee】开启及清除NV_RESTORE信息的方法

    1.NV_RESTORE宏的作用 问:coo和终端都已经组网成功 1.这时将coo断电,又一次上电,组网后终端的短地址是否不变? 2.这时终端断电,又一次上电,组网后终端的短地址是否不变? 3.这时C ...

  3. Maven 实现Struts2注解配置步骤详解

    1,pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  4. Tomcat 用户配置

    如果你没有改变任何配置文件,请检查文件conf / tomcat用户.xml在你安装.该文件必须包含凭证让你使用这个应用. 例如,添加一个用户名为tomcat manager gui角色s3cret密 ...

  5. 跟Google学习Android开发-起始篇-与其它应用程序交互(2)

    6.2从活动获取结果 启动另一个活动不必是单向的.您也可以启动另一个活动,并接收一个结果回来.为了接收一个结果,调用startActivityForResult()(而不是startActivity( ...

  6. 2014 Multi-University Training Contest 1 — D. Task

    题目链接:pid=4864">http://acm.hdu.edu.cn/showproblem.php?pid=4864 题目大意: 有N个机器.M个任务. 当中每一个机器有xi,y ...

  7. html适配Anroid手机

    本文全然是翻译与总结谷歌官方的教程,已确保文档的正确性. 免得大家被五花八门的其它的资料弄混了,也没有系统行的学习. 一.设置窗体尺寸和适配屏幕分辨率 谷歌官方文档提到两个大的方面. 1.Viewpo ...

  8. Swift - 环形进度条(UIActivityIndicatorView)的用法

    Swift中,除了条形进度条外,还有环形进度条,效果图如下: 1,环形进度条的基本属性 (1)Style: Large White:比较大的白色环形进度条 White:白色环形进度条 Gray:灰色环 ...

  9. Lucene.Net 2.3.1开发介绍 —— 二、分词(六)

    原文:Lucene.Net 2.3.1开发介绍 -- 二.分词(六) Lucene.Net的上一个版本是2.1,而在2.3.1版本中才引入了Next(Token)方法重载,而ReusableStrin ...

  10. getResource(String name)用法及源码分析

    Project获取资源需要一个启点,加载资源的动作是由ClassLoader来完成的.Class对象和当前线程对象可以找到当前加载资源的ClassLoader,通过ClassLoader的getRes ...