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. MFC连接postgre数据库

    配置环境: include:libpq-fe.h文件 lib:libpq.lib文件 dll:libeay32.dll,libiconv-2.dll,libintl-8.dll,libpq.dll,s ...

  2. Linux seq命令详解

    seq: squeue  是一个序列的缩写,主要用来输出序列化的东西 seq常见命令参数 用法:seq [选项]... 尾数 或:seq [选项]... 首数 尾数 或:seq [选项]... 首数 ...

  3. Microsoft Teams 版本与语音落地介绍

    我亲爱的小伙伴们,失踪人口回归啦~~ 今天和大家聊的是Microsoft Teams,Teams作为协作的集大成者,可以实现skype for Business的所有功能,还可以在teams里集合Of ...

  4. php面试题之一——php核心技术

    一.PHP核心技术 1.写出一个能创建多级目录的PHP函数(新浪网技术部) <?php /** * 创建多级目录 * @param $path string 要创建的目录 * @param $m ...

  5. PHP设计模式系列 - 观察者模式

    观察者模式 观察者设计模式能够更便利创建和查看目标对象状态的对象,并且提供和核心对象非耦合的置顶功能性.观察者设计模式非常常用,在一般复杂的WEB系统中,观察者模式可以帮你减轻代码设计的压力,降低代码 ...

  6. 缓冲区溢出基础实践(一)——shellcode 与 ret2libc

    最近结合软件安全课程上学习的理论知识和网络资料,对缓冲区溢出漏洞的简单原理和利用技巧进行了一定的了解.这里主要记录笔者通过简单的示例程序实现缓冲区溢出漏洞利用的步骤,按由简至繁的顺序,依次描述简单的 ...

  7. python第十六课——外部函数and内部函数

    1.外部函数&内部函数 内部函数: 定义在某个函数的内部,就是内部函数: [注意事项]: 1).内部函数可以随意使用它外部函数中的内容 2).外部函数不能使用内部函数中的内容 3).内部函数不 ...

  8. 1.3 Essential Python Libraries(一些重要的Python库)

    1.3 Essential Python Libraries(一些重要的Python库) 如果不了解Python的数据生态,以及本书中即将用到的一些库,这里会做一个简单的介绍: Numpy 这里就不过 ...

  9. 文件上传之MultipartFile使用

    转载 文件断点上传,html5实现前端,java实现服务器 一.单/多文件上传使用例子: 工程路径如下 -src |--main.java    --controller    --service  ...

  10. 多线程之CountDownLatch、CyclicBarrier和Semaphore

    Java并发编程:CountDownLatch.CyclicBarrier和Semaphore 在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch ...