HTML5规定可以为元素添加非标准的属性,但要添加前缀 data- ,目的是为元素提供与渲染无关的
信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以 data- 开头即可

添加了自定义属性之后,可以通过元素的 dataset 属性来访问自定义属性的值

 <div id="box" data-name='ghostwu' data-age='22' , data-sex='man'>ghostwu tell you how to learn html5</div>
<script>
var oBox = document.querySelector("#box");
console.log( oBox.dataset ) ; var myName = oBox.dataset.name;
var myAge = oBox.dataset.age;
var mySex = oBox.dataset.sex; if( oBox.dataset.name ) {
console.log( oBox.dataset.name );
}
</script>

HTML5新特性: 自定义属性前缀data-以及dataset的使用的更多相关文章

  1. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  2. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  3. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  4. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  5. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  6. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  7. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  8. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  9. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

随机推荐

  1. 使用django UWSGI 出现 Bad Request (400)

    使用 Nginx + Django+UWSGI 部署机器时,一直出现 Debugging Apache/Django/WSGI Bad Bad Request (400) 错误 最后发现问题是 Dja ...

  2. html标签对应的英文原文 - 司徒正美

    标签 对应英文 说明 <!--> / 注释 <!DOCTYPE> document type 文档类型 <a> anchor 超链接 <abbr> ab ...

  3. cygwin下java报错“找不到或无法加载主类”的故障排除

    win7 下安装了java,命令行下可以正常运行,cygwin下报错:找不到或无法加载主类. 经排查发现是cygwin的~/.bash_profile中画蛇添足的配置了$CLASSPATH: JAVA ...

  4. OpenCASCADE入门指南

    OpenCASCADE入门指南 eryar@163.com 一.概述 荀子说“君子性非异也,善假于物也”.当你会用英语,就可以与世界各国的人交流:当你会用编程语言,就可以与计算机交流:当你会用数学语言 ...

  5. 开发H5基本知识摘要

    一:开发平台 我在公司开发app主要是在apicloud平台上https://www.apicloud.com/,需要开发的同学可以点击进入这个平台了解: 二:开发工具 既然是在apicloud平台上 ...

  6. POJ 3928 &amp; hdu 2492 &amp; Uva1428 PingPong 【树状数组】

    Ping pong                                                   Time Limit: 2000/1000 MS (Java/Others)   ...

  7. Elasticsearch短语搜索——match_phrase

    找出一个属性中的独立单词是没有问题的,但有时候想要精确匹配一系列单词或者短语 . 比如, 我们想执行这样一个查询,仅匹配同时包含 "rock" 和 "climbing&q ...

  8. GIS前端将选中的图形输出为Shapfile文件

    老师让我实现如题的功能,我对着ArcGIS js api找了半天,没有发现该方法接口,找了很多资料,前后问了三个前辈. 第一个前辈说用GP服务,我在ArcMap的工具箱里找到convert to la ...

  9. mango(mango ORM框架介绍)

    官网地址:http://www.jfaster.org/ mango的中文名是"芒果",它是一个极速分布式ORM框架.目前已有十多个大型线上项目在使用mango,在某一支付系统中, ...

  10. java什么叫线程安全?什么叫不安全?

    就是线程同步的意思,就是当一个程序对一个线程安全的方法或者语句进行访问的时候,其他的不能再对他进行操作了,必须等到这次访问结束以后才能对这个线程安全的方法进行访问 什么叫线程安全: 如果你的代码所在的 ...