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. x86 处理器开机顺序

    无论是千万行的linux ,还是百万行的uefi ,或者百十行的app, 它都有一个主线.应用程序是main() 函数里面全部函数运行完,程序结束.这里main() 做为程序的起点,uefi 能够觉得 ...

  2. Python: The _imagingft C module is not installed错误的解决

    Python: The _imagingft C module is not installed错误的解决 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明 ...

  3. Oracle集合操作

    在Oracle中提供了三种类型的集合操作: 并(UNION).交(INTERSECT).差(MINUS) UNION:将多个查询的结果组合到一个查询结果之中,并去掉反复值 UNION ALL:将多个查 ...

  4. .NET Core RSA 签名和验签(密钥为 16 进制编码)

    使用 OpenSSL 生成公私钥对,命令: $ openssl genrsa -out rsa_1024_priv.pem $ openssl pkcs8 -topk8 -inform PEM -in ...

  5. IDEA下Spring Boot的快速搭建

    下边使用的是IDEA快速搭建一个Spring Boot项目 (1)File--New-New Project (2)点击Next填写相应的信息 (3)点击Next,选择Dependencies,这里创 ...

  6. java中websocket的应用

    在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...

  7. 【转载】JAVA中综合接口和抽象类实现的一种“抽象接口”

    Muscleape个人总结:(这里的抽象接口是指:使用一个抽象类实现一个接口,是两部分结构) 使用一个抽象类直接实现接口,将接口中的方法区分为实现类必须要实现的和选择性实现的,其他需要实现接口的类型通 ...

  8. MPSOC之3——centos环境配置及petalinux安装及使用

    ubuntu虽然能正常安装,但是build时会出现闪退情况,闪退后一切归零,没啥错误提示,改用centos来安装petalinux. 0.环境 vmware pro 14,centos 7.3 pet ...

  9. mac下通过mdfind命令搜索文件

    mdfind命令就是Spotlight功能的终端界面,这意味着如果Spotlight被禁用,mdfind命令也将无法工作.mdfind命令非常迅速.高效.最基本的使用方法是: mdfind -name ...

  10. 【MySQL】数据库字段类型

    1.数值型 整型 TINYINT SMALLINT MEDIUMINT INT BIGINT 浮点型 FLOAT(m,n) - m表示总位数,n表示小数位数. DOUBLE(m,n) DECIMAL( ...