HTML5的data-*自己定义属性
详细用法例下:
<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-*自己定义属性的更多相关文章
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- Html5 dataset--自定义属性
dataset--自定义属性 HTMLElement.dataset data-*属性集 元素上保存数据 <div id="user" data-id="12345 ...
- HTML5基础知识汇总_(2)自己定义属性及表单新特性
自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...
- HTML5 学习笔记 表单属性
HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- Intent的属性及Intent-filter配置——Data、Type属性与intent-filter配置
Data属性通常用于向Action属性提供操作的数据,Data属性接受一个Uri对象,一个Uri对象通常通过如下形式的字符串来表示: content://com.android.contacts/co ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- HTML5新增的标签和属性归纳
收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...
- 揭秘DOM中data和nodeValue属性同步改变那些事
问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...
随机推荐
- MAC软连接
在mac上不设置环境变量有的时候也可以直接就访问到了某些文件.这个是为什么呢?答案是用了软连接. 1 查看加载文件 可以使用cat命令查看paths文件 cat etc/paths /usr/loca ...
- Spring Boot (1) 构建第一个Spring Boot工程
Spring boot简介 spring boot是spring官方推出的一个全新框架,其设计目的是用来简化新spring应用的初始搭建以及开发过程. Spring boot特点 1.化繁为简,简化配 ...
- 上传预览图片的插件jquery-fileupload
上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...
- ie8及其以下版本兼容性问题之响应式
解决办法:引入Respond.js让IE6-8支持CSS3 Media Query 使用方式 参考官方demo:http://scottjehl.github.com/Respond/test/tes ...
- 【PLSQL】游标
Oracle中的SQL在执行时需要分配一块内存区域,这块内存区域叫做上下文区. 上下文区中记录了SQL语句的处理信息,这些信息包括:查询返回的数据行.查询所处理的数据的行号.指向共享池中的已分析的SQ ...
- C# FormClosing FormClosed 区别详解
FormClosing事件 在窗体关闭时,FormClosing事件发生.此事件会得到处理.从而释放与窗体相关的所有资源. 如果取消此事件,则窗体仍然保持打开状态. 当窗体显示为模式对话框时,单击“关 ...
- python监听鼠标和键盘
import PyHook3 def OnMouseEvent(event): print('MessageName:',event.MessageName) print('Message:',eve ...
- tp实现多语言支持测试
用tp框架实现网页多种语言切换 时间:2016-11-11 浏览次数:1120 编辑:youjiejie 网页如何设计多种语言切换,本文用tp框架实现网页多种语言切换方法结合实例形式较为详细的分析 ...
- Python批量添加库搜索路径
被win10 给坑了,换回Win7. 重装系统后,继续使用Python,Eclipse不用重装,pydev不用重装,只需重装Python2.7.6 X64 for win即可.然后,默认已安装的Pyt ...
- Why use Cache-Control header in request?
本地缓存也是缓存代理的一部分. 请求时使用Cache-Control 表示缓存的使用策略. 请求头里的no-cache表示浏览器不想读缓存,并不是说没有缓存.一般在浏览器按ctrl+F5强制刷新时,请 ...