html5——自定义属性
自定义属性:添加前缀“data-”
dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀)
data-name:dataset.name
data-name-first:dataset.nameFirst
html结构:
<div id="div1" data-name="china" data-name-all="chinese">div</div>
1.利用 getAttribute、setAttribute 存取 dataset
var oDiv = document.getElementById("div1"); //get
console.log(oDiv.getAttribute("data-name")); // china
console.log(oDiv.getAttribute("data-name-all")); // chinese //set
oDiv.setAttribute("data-name","hello");
oDiv.setAttribute("data-name-all","hi");
这样就可以以一种更兼容的方式,来存取dataset数据。所做出的任何更改,都是可以实时反映到元素data属性上的。
但是这种方法比较低端,如果遇到多个data-*自定义字段,想要一次全部获取所有的data属性并包装成对象的话,还必须做一个循环,很麻烦。
2.利用 dataset API 存取 dataset
var oDiv = document.getElementById("div1"); //get
console.log(oDiv.dataset.name); // china
console.log(oDiv.dataset.nameAll); // chinese //set
oDiv.dataset.name = 'hello';
oDiv.dataset.nameAll = 'hi';
3.利用 jQuery.attr 方法存取 dataset
//get
console.log($('#div1').attr('data-name')); // china
console.log($('#div1').attr('data-name-all')); // chinese //set
$('#div1').attr('data-name', 'hello');
$('#div1').attr('data-name-all', 'hi');
4.利用 jQuery.data 方法存取 dataset
//get
console.log($('#div1').data('name')); // china
console.log($('#div1').data('nameAll')); // chinese //set
$('#div1').data('name', 'hello');
$('#div1').data('nameAll', 'hi');
这样的方法也能出色的存取data属性,但是需要注意,jQuery.data对data数据做出的更改,不会反映到HTML元素data属性上。
html5——自定义属性的更多相关文章
- HTML5自定义属性对象Dataset简介
一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...
- Jquery 操作HTML5自定义属性data-*
HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...
- HTML5 自定义属性 data-*属性名一定要小写吗?
最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...
- HTML5自定义属性操作
一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...
- HTML5自定义属性之data-*
HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...
- HTML5 自定义属性 data-*介绍
在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...
- HTML5 自定义属性
先声明 HTML5的自定义属性浏览器支持性不太好 目前只有firefox6+和chrome浏览器支持 元素除了自带的属性外 另外也可以加自定义属性 不过需要在前面加上data- 下面举个例子 ...
- HTML5自定义属性的设置与获取
<div id="box" aaa="bbb" data-info="hello"></div> <body& ...
- HTML5 自定义属性 data-* 和 jQuery.data 详解
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...
随机推荐
- poj1007-DNA Sorting(排序)
一,题意: 输入N个字符串,按照字符串的逆序数由最少到最大开始输出. 注意:如果逆序数相同,就原来顺序输出. 二,思路步骤: 1,输入,并用a[]存储每行字符串的逆序数; 2,冒泡排序a[]的同时换掉 ...
- hihoCoder 1393 网络流三·二分图多重匹配(Dinic求二分图最大多重匹配)
#1393 : 网络流三·二分图多重匹配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 学校的秋季运动会即将开始,为了决定参赛人员,各个班又开始忙碌起来. 小Hi和小H ...
- ssh项目java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoade错误
错误: 导入别人的ssh项目后出现java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoade错误, 错 ...
- Robot Framework 的安装和配置(转载)
Robot Framework 的安装和配置 在使用 RF(Rebot framework)的时候需要 Python 或 Jython 环境,具体可根据自己的需求来确定.本文以在有 Python 的环 ...
- Codevs 2370 小机房的树 LCA 树上倍增
题目描述 Description 小机房有棵焕狗种的树,树上有N个节点,节点标号为0到N-1,有两只虫子名叫飘狗和大吉狗,分居在两个不同的节点上.有一天,他们想爬到一个节点上去搞基,但是作为两只虫子, ...
- asp.net mvc 在视图中获取控制器与动作的名称
获取 controller 名称: ViewContext.RouteData.Values["controller"].ToString(); 获取 action 名称: Vie ...
- smarty中使用truncate出现乱码,用mb_substr解决
- SQL SERVER数据库备份时出现“操作系统错误5(拒绝访问)。BACKUP DATABASE 正在异常终止。”错误的解决办法
一般备份文件选择的目录为磁盘根目录或备份所选分区未授予sqlserver用户读写权限时会出现此错误. 解决办法就是给sqlserver用户授予权限: 选择要备份的文件夹 ,右键-->属性--&g ...
- 日志监控系统中,大批量查询mysql方案
最近开发遇到一个问题:需要查询一个大时间段内的数据,分1000个小段,即为1000个点.X轴是时间,Y轴是该小时间段内统计后数据.注意:数据返回是一个list,其中每个对象返回值都是该小时间段内数据统 ...
- Python学习【第十篇】基础之杂货铺
字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 百分号方式: ...