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. [置顶] spring集成mina 实现消息推送以及转发

    spring集成mina: 在学习mina这块时,在网上找了很多资料,只有一些demo,只能实现客户端向服务端发送消息.建立长连接之类.但是实际上在项目中,并不简单实现这些,还有业务逻辑之类的处理以及 ...

  2. [置顶] Java WebService接口生成和调用 图文详解

    webservice简介: Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应用之间 ...

  3. python3 scrapy+Crontab部署过程

    背景 最近有时间想学习下python3+scrapy,于是决定写一个小程序来练练手. 开发环境:MacOS High Sierra(10.13.1)+python3+scrapy. 开发工具:PyCh ...

  4. 《RabbitMQ Tutorial》译文 第 4 章 路由

    原文来自 RabbitMQ 英文官网的教程(4.Routing),其示例代码采用了 .NET C# 语言. In the previous tutorial we built a simple log ...

  5. WebLogic部署报java.lang.ClassCastException: weblogic.xml.jaxp.RegistrySAXParserFactory cannot be cast to javax.xml.parsers.SAXParserFactory

    今天在部署WebLogic项目时,报了java.lang.ClassCastException: weblogic.xml.jaxp.RegistrySAXParserFactory cannot b ...

  6. 鼠标悬停,图片放大 CSS实现

    因为最近做的项目刚好用到了这个实现,分享出来   class=enlarge 为div标签的class div img 为标签 .enlarge div img:hover{ transform: s ...

  7. constructor.prototype

    一个很好玩的小问题考大家对js的理解function alert (){}; ________________ // 填空 alert(1); 使1弹出  http://perfectionkills ...

  8. Android Things 专题6 完整的栗子:运用TensorFlow解析图像

    文| 谷歌开发技术专家 (GDE) 王玉成 (York Wang) 前面絮叨了这么多.好像还没有一个整体的概念.我们怎样写一个完整的代码呢? 如今深度学习非常火,那我们就在Android Things ...

  9. MS OFFICE WORD 绝招

    以MS OFFICE WORD 2010为例. 1.WORD 文件夹连接线(标准称呼:前导符)为什么有的稀,有的密? 答案:文件夹格式字体不同. 2.首页.文件夹页.正文有的要页眉,有的不要,首页不要 ...

  10. overridePendingTransition介绍

    Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画 它包含两个部分: 一部分是第一个activity退出时的动画: 另外一部分时第二个activity进入时的 ...