HTML5添加了一项新功能是自己定义数据属性。也就是data-*自己定义属性。在HTML5中我们能够使用以data-为前缀来设置我们须要的自己定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中很实用。眼下採取这样的做法的框架也有许多,最常见的当属jQueryMobile。
详细用法例下:
<div id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></div>

在传统的做法中我们能够配合jquery使用。例如以下:

$("#head").attr("data-home");
$("#head").attr("data-home","new");

或者纯js做法:
在IE浏览器里,我们通过获取对象后直接调用就能够了

document.getElementById("head").["data-home"];
document.getElementById("head").["data-home"] = "new";

在火狐和谷歌浏览器里。我们能够通过getAttribute方法来实现调用:

document.getElementById("head").getAttribute("data-home");
document.getElementById("head").setAttribute("data-home","new");

再HTML5中的简洁操作方法:(dataset属性存取data-*自己定义属性的值)
这样的方式通过訪问一个元素的 dataset 属性来存取 data-* 自己定义属性的值。

这个 dataset 属性是HTML5 JavaScript API的一部分,用来返回一个全部选择元素 data- 属性的DOMStringMap对象。
使用这样的方法时。不是使用完整的属性名,如data-home来存取数据,应该去掉data-前缀。

另一点特别注意的是:data-属性名假设包括了连字符。比如:data-date-of-birth 。连字符将被去掉。并转换为驼峰式的命名,前面的属性名转换后应该是:dateOfBirth。

<div id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群:135430763</div>
<script type="text/javascript">
var el = document.querySelector('#head');
console.log(el.id);
console.log(el.dataset);//一个DOMStringMap
console.log(el.dataset.home);
console.log(el.dataset.author);
console.log(el.dataset.dateOfBirth);
el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值.
//推断属性
console.log('testAttr' in el.dataset);//false
el.dataset.testAttr = 'testAttr';
console.log('testAttr' in el.dataset);//true
</script>

假设你想删掉一个 data-属性 ,能够这么做: delete el.dataset.home ;  或者 el.dataset.home = null;。
这样操作起来是不是很的方便。但有些浏览器可能还不支持。

所以在此期间最好用的getAttribute和setAttribute来操作或配合jquery进行使用。
data-属性选择器
在实际开发时,能够依据自己定义的data-属性选择相关的元素。比如使用querySelectorAll选择元素:
//选择全部包括'data-div'属性的元素
document.querySelectorAll ('[data-div]') ;
//选择全部包括'data-a-href' 属性值为red的元素
document.querySelectorAll ('[data-a-href="#"]') ;
相同的我们也能够通过data-属性值对对应的元素设置CSS样式,比如以下这个样例:

<style type ="text/css">
.head {
width : 256px ;
height : 200px ;
} .head[data-a='btn-a'] {
color : brown
} .head[data-a='btn-color'] {
color : red
}
</style>
<div class = "head" data-qq = "QQ群:135430763" data-a = "btn-a" > button按钮 </div>
<div class = "head" data-qq = "QQ群:135430763" data-a = "btn-color" > button按钮</div>

欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!


HTML5的data-*自己定义属性的更多相关文章

  1. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  2. Html5 dataset--自定义属性

    dataset--自定义属性 HTMLElement.dataset data-*属性集 元素上保存数据 <div id="user" data-id="12345 ...

  3. HTML5基础知识汇总_(2)自己定义属性及表单新特性

    自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...

  4. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  5. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  6. Intent的属性及Intent-filter配置——Data、Type属性与intent-filter配置

    Data属性通常用于向Action属性提供操作的数据,Data属性接受一个Uri对象,一个Uri对象通常通过如下形式的字符串来表示: content://com.android.contacts/co ...

  7. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  8. HTML5新增的标签和属性归纳

    收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...

  9. 揭秘DOM中data和nodeValue属性同步改变那些事

    问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...

随机推荐

  1. MAC软连接

    在mac上不设置环境变量有的时候也可以直接就访问到了某些文件.这个是为什么呢?答案是用了软连接. 1 查看加载文件 可以使用cat命令查看paths文件 cat etc/paths /usr/loca ...

  2. Spring Boot (1) 构建第一个Spring Boot工程

    Spring boot简介 spring boot是spring官方推出的一个全新框架,其设计目的是用来简化新spring应用的初始搭建以及开发过程. Spring boot特点 1.化繁为简,简化配 ...

  3. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  4. ie8及其以下版本兼容性问题之响应式

    解决办法:引入Respond.js让IE6-8支持CSS3 Media Query 使用方式 参考官方demo:http://scottjehl.github.com/Respond/test/tes ...

  5. 【PLSQL】游标

    Oracle中的SQL在执行时需要分配一块内存区域,这块内存区域叫做上下文区. 上下文区中记录了SQL语句的处理信息,这些信息包括:查询返回的数据行.查询所处理的数据的行号.指向共享池中的已分析的SQ ...

  6. C# FormClosing FormClosed 区别详解

    FormClosing事件 在窗体关闭时,FormClosing事件发生.此事件会得到处理.从而释放与窗体相关的所有资源. 如果取消此事件,则窗体仍然保持打开状态. 当窗体显示为模式对话框时,单击“关 ...

  7. python监听鼠标和键盘

    import PyHook3 def OnMouseEvent(event): print('MessageName:',event.MessageName) print('Message:',eve ...

  8. tp实现多语言支持测试

    用tp框架实现网页多种语言切换 时间:2016-11-11 浏览次数:1120 编辑:youjiejie   网页如何设计多种语言切换,本文用tp框架实现网页多种语言切换方法结合实例形式较为详细的分析 ...

  9. Python批量添加库搜索路径

    被win10 给坑了,换回Win7. 重装系统后,继续使用Python,Eclipse不用重装,pydev不用重装,只需重装Python2.7.6 X64 for win即可.然后,默认已安装的Pyt ...

  10. Why use Cache-Control header in request?

    本地缓存也是缓存代理的一部分. 请求时使用Cache-Control 表示缓存的使用策略. 请求头里的no-cache表示浏览器不想读缓存,并不是说没有缓存.一般在浏览器按ctrl+F5强制刷新时,请 ...