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. Redis学习---CentOs/RedHat下Redis的安装

    redis是C语言开发,建议在linux上运行,本教程使用Centos6.4作为安装环境.      安装redis需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gc ...

  2. Linux cal命令详解

    cal 显示指定月份的日历 常见命令参数 NAME cal - displays a calendar SYNOPSIS cal [-smjy13] [[[day] month] year] DESC ...

  3. SC review 5.2 设计可复用软件

    行为子类型与Liskov替换原则 Java 中编译器执行的规则(静态类型检查): • 子类型可以增加方法,但不可删 • 子类型需要实现抽象类型中的所有未实现方法 • 子类型中重写的方法必须有相同或子类 ...

  4. 判断是否是微信浏览器JavaScript代码

    function isWeiXin(){     var ua = window.navigator.userAgent.toLowerCase();     if(ua.match(/MicroMe ...

  5. MySQL主从.md

    MySQL Replication 概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它 ...

  6. Day17 多线程编程

    基本概念 进程:内存中正则运行的一个应用程序.一个进程包含多个线程. 线程:进程中的一个执行流程. 多线程:有两个或两个以上的并发执行流程. 线程的声明周期 说明: 1. 新建状态(New)      ...

  7. regex_replace

    Regex_iterator方法需要输入一个正则表达式,以及一个用于替换匹配的字符串的格式化字符串:这个格式化的字符串可以通过表的转义序列引用匹配子字符串的部分内容: 转义序列 $n 替换第n个捕获的 ...

  8. mysql root密码忘记重置及相关注意事项

    1.使用mysqld_safe --skip-grant-tables跳过授权,进入mysql操作界面或者在配置文件mysqld 添加skip-grant-tables也行,找回后需要删除..恢复原样 ...

  9. c++—— 函数重载(Overroad)

    5 函数重载(Overroad) 函数重载概念 1 函数重载概念 函数重载(Function Overload) 用同一个函数名定义不同的函数 当函数名和不同的参数搭配时函数的含义不同 2 函数重载的 ...

  10. PHP的Reflection反射机制

    更多内容推荐微信公众号,欢迎关注: 原文地址: http://www.nowamagic.net/php/php_Reflection.php PHP5添加了一项新的功能:Reflection.这个功 ...