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. windows 终端命令详解

    打开"运行"对话框(Win+R),输入cmd,打开控制台命令窗口... 也可以通过cmd /c 命令 和 cmd /k 命令的方式来直接运行命令 注:/c表示执行完命令后关闭cmd ...

  2. JaveScript简单数据类型(JS知识点归纳二)

    JS中的简单数据类型有五种 : --> string --> number -->boolean --> null -->undefined 数据类型的检测 :typeo ...

  3. 命令行界面下使用emca安装配置Oracle Database Control实战

    作为命令行忠有用户,server端软件的运维都倾向于使用命令或 脚本完毕,非常讨厌资源占用非常大的GUI.Oracle数据库作为重要的server端软件.其安装运维自然也全然支持纯命令行方式.虽然同一 ...

  4. SYSAUX表空间使用率高问题处理

    SYSAUX表空间做为SYSTEM表空间的辅助表空间,主要存放EM相关的内容以及表统计信息,AWR快照,审计信息等,而假设SYSAUX表空间在默认条件下你假设不做不论什么配置,随着时间的推移.会膨胀的 ...

  5. 虚拟数据库_json_ajax

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. ResourceBundle读取文件学习

    开发中,我们经常需要读取本地文件(properties文件),这样的好处是文件是动态的,可配置的.这时候我们就需要用到ResourceBundle这个类. 这个类属于java.util.*. 这个类的 ...

  7. Winform开发框架中工作流模块之审批会签操作

    在前面介绍了框架中工作流的几个开发过程,本篇随笔重点介绍一下日常审批环节中的具体处理过程,从开始创建表单,以及各个审批.会签过程的流转过程,希望大家对其中流程的处理有一个大概的印象. 1.请假申请表单 ...

  8. 自学Python1.2-环境的搭建:Pycharm及python安装详细教程

    Python几乎可以在任何平台下运行,如我们所熟悉的:Windows/Unix/Linux/Macintosh 一.windows下安装Python 1. 从python官方网站:http://www ...

  9. Django的Models

    Django的数据库配置: 1    django默认支持sqlite,mysql, oracle,postgresql数据库 2.   在django的项目中会默认使用sqlite数据库,如果要使用 ...

  10. java String,StringBuffer和StringBulder学习笔记

    1.String:不可改变的Unicode字符序列. 池化思想,把需要共享的数据放在池中,用一个存储区域来存放一些公用资源以减少存储空间的开销. 在String类中,以字面值创建时,回到java方法空 ...