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. C# 多线程系列(三)

    线程池 创建线程需要时间,如果有不同的小任务要完成,就可以事先创建许多线程,在应完成这些任务时发出请求.这个线程数最好在需要更多线程时增加,在需要释放资源时减少. 不需要自己创建这样的一个列表.该列表 ...

  2. [hihocoder][Offer收割]编程练习赛50

    循环数组 计算a[i]的前缀和s[i],计算l[i]为1~i-1中最小的s值,r[i]为i~n中最大的s值. 则a[i]~a[n]满足性质的条件为r[i]-s[i-1]>0,a[1]~a[i-1 ...

  3. 通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能

    文字直播是满足一些观看视频直播而条件不足的球迷所设定的比赛直播方式,例如在长途车上为了能够了解比赛的实时赛况但又限于流量和网速等问题,就出现了文字直播的方式.无论是拥有无线上网卡的笔记本电脑或者手机等 ...

  4. 利用set特性判断list是否存在重复的值

    List<String>  list2=new ArrayList();//存放很多值的list //根据set不能存储相同的值该特性来判断list2中的值是否重复 HashSet set ...

  5. MYSQL 代码删除和添加表格列方法

    一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...

  6. POJ_2063_完全背包

    Investment Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 10090   Accepted: 3540 Descr ...

  7. java HttpURLConnection 登录网站 完整代码

    import java.io.*; import java.util.*; import java.net.*; public class WebTest { public static void m ...

  8. lvs负载均衡net模式

    环境配置,一台双网卡的ens33,ens37,ens37的网关是ens33的IP,指定一下nginx ens33,192.168.30.22,ens37,172.16.1.1nginx  192.16 ...

  9. javascrip this指向问题深入理解

    在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...

  10. eas之日志文件夹

    F:\ThisIs_MyWork\kingdee\eas\server\profiles\server1\logs 服务端的日志文件夹    F:\ThisIs_MyWork\kingdeecusto ...