HTML5规范里增加了一个自定义data属性.

这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.

使用data-*可以解决自定义属性混乱无管理的现状。

工具/原料

  • Internet Explorer 11+    Chrome 8+    Firefox 6.0+   Opera 11.10+    Safari 6+

  • 以上任意浏览器一个

方法/步骤

  1. 获取自定义属性的值

    如下:

    <div id="content" data-age="18">html5 data-*自定义属性 age</div>

    多了一个”data-*” 属性, 如何获取呢?

    //js

    var content= document.getElementById('content');

    alert(content.dataset.age)

    //jquery

    $('#content').data('age');//读

  2.  

    读取的时候是通过dataset对象,使用”.”来获取属性,需要去掉data-前缀,连字符需要转化为驼峰命名

    <div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

    //js

    var content= document.getElementById('content');

    alert(content.dataset.userList)

    //jquery

    $('#content').data('userList');//读

  3.  

    通过js方式给data-*设置值

    <div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

    //js

    var content= document.getElementById('content');

    content.dataset.name='我叫tom'

    alert(content.dataset.name)

    //jquery

    $('#content').data('name','我叫tom');//写

  4. 4

    getAttribute/setAttribute方法的使用

    var content= document.getElementById('content');

    content.dataset.birthDate = '19990619';

    content.setAttribute('age', 25);

    console.log(content.getAttribute('data-age')); //25       console.log(content.getAttribute('data-birth-date')); //19990519

html5新特性data_*自定义属性使用的更多相关文章

  1. html5新特性

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

  2. 转: HTML5新特性之Mutation Observer

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

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

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

  4. HTML5新特性:FileReader 和 FormData

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

  5. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  6. HTML5新特性:范围样式

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

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

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

  8. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  9. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

随机推荐

  1. Linux rpm命令详解

    rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...

  2. delete obj$

    //////要用system,dba身份登入进去//////select * from obj$ oWHERE o.obj#=149554where o.name='MV_ZD_QLR' delete ...

  3. Windows10 1709正式版WSL安装(以Ubuntu为例)

    因为最近要使用Linux搭服务器,但是用远程的话延迟很烦,用双系统切换很麻烦,用虚拟机又会有点卡,刚好Windows10最近更新了正式版的WSL(windows下的Linux子系统),所以就想尝试一下 ...

  4. 为什么ConcurrentHashMap是弱一致的

    为什么ConcurrentHashMap是弱一致的 本文将用到Java内存模型的happens-before偏序关系(下文将简称为hb)以及ConcurrentHashMap的底层模型相关的知识.ha ...

  5. 在.NET中操作数字证书(新手教程)

    .NET为我们提供了操作数字证书的两个主要的类,分为为: System.Security.Cryptography.X509Certificates.X509Certificate2类, 每个这个类的 ...

  6. jQuery获取radio选中项checked的几种方法

    如何知道radio哪个选项被选中了,也就是获取checked的radio项.这是个很简单的任务,这里我总结了几个常用的方法,体验一下jQuery的灵活. 具体的 HTML 和 jQuery 代码可以右 ...

  7. acl 4 year statistics

  8. grep命令.md

    grep命令 简介 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Prin ...

  9. UVa 11440 - Help Tomisu(欧拉函数 + 问题转换)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. React 如何正常渲染一段HTML字符串

    dangerouslySetInnerHTMl 属性 很多时候我们做一个项目接口会返回一段 HTML 字符串文本,然后我们把它解析渲染成正常的html,这是在项目中常见不能再常见的情况了,可是在 re ...