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. Android JNI programming demo with Eclipse

    用Eclipse 建立 JNI 的專案, 示範怎样在 JAVA 調用 cpp 的函數. 我們將建立一個名稱為 jnidemo的專案, 在主Activity 將調用一個名為libHello.so 的 c ...

  2. [置顶] Java字节码文件剖析

    Java为什么能够支持跨平台,其实关键就是在于其*.class字节码文件,因为*.class字节码文件有一个统一标准的规范,里面是JVM运行的时需要的相关指令,各家的JVM必须能够解释编译执行标准字节 ...

  3. python中的中文编码

    我现在编写python代码,有一些内容需要用中文编写,例如注释,一些其它的东西 默认python是不支持中文的,包括两个方面不支持,一是文件编码默认是ansi的,二是虚拟机运行解析脚本时也是非utf的 ...

  4. PHP中抽象类与接口的应用场景

    <?php /*** ====笔记部分==== 接口的具体语法: 0:以人类为, class Human 是人的草图 而接口 是零件 可以用多种零件组合出一种新特种来. 1: 如上,接口本身即是 ...

  5. #pragma 预处理指令详解

    源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma  预处理指令详解              在所有的预处理指令中, ...

  6. 搜索引擎爬虫蜘蛛的USERAGENT大全

    搜索引擎爬虫蜘蛛的USERAGENT大全 搜索引擎爬虫蜘蛛的USERAGENT收集,方便制作采集的朋友.   百度爬虫 * Baiduspider+(+http://www.baidu.com/sea ...

  7. Cocos2d-x 创建(create)动画对象CCAnimation报错分析

    本人在使用精灵表单创建动画的过程中突然遇到了一些个问题,下面进行一下分析总结. 根据在Cocos2d-iphone中的经验,我写出了如下的代码: CCSpriteFrameCache::sharedS ...

  8. 随想录(关于ucore)

    [ 声明:版权全部,欢迎转载.请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 之前用过一段时间skyeye,也对开发skyeye的陈渝有一些了解.近期在github上闲逛的 ...

  9. Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException

    1.错误描写叙述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -he ...

  10. cURL安装和使用笔记

    0.前言     cURL是一个利用URL语法在命令行下工作的文件传输工具.它支持文件上传和下载,所以是综合传输工具,但习惯称cURL为下载工具.cURL还包含了用于程序开发的libcurl.cURL ...