HTML5 data-* 自定义属性
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
读写方式
data-*有两种设置方式,可以直接在HTML元素标签上书写
<div id="test" data-age="24">
Click Here
</div>
其中的data-age就是一种自定义属性,当然我们也可以通过JavaScript来对其进行操作,HTML5中元素都会有一个dataset的属性,这是一个DOMStringMap类型的键值对集合
var test = document.getElementById('test');
test.dataset.my = 'Byron';
这样就为div添加了一个data-my的自定义属性,使用JavaScript操作dataset有两个需要注意的地方
1. 我们在添加或读取属性的时候需要去掉前缀data-*,像上面的例子我们没有使用test.dataset.data-my = 'Byron';的形式。
2. 如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式
为刚才代码追加写内容
复制代码
<style type="text/css">
[data-birth-date]
{
background-color: #0f0;
width:100px;
margin:20px;
}
</style>
复制代码
test.dataset.birthDate = '19890615';
这样我们通过JavaScript设置了data-birth-date自定义属性,在CSS样式表为div添加了一些样式,看看效果
读取的时候也是通过dataset对象,使用”.”来获取属性,同样需要去掉data-前缀,连字符需要转化为驼峰命名
var test = document.getElementById('test');
test.dataset.my = 'Byron';
test.dataset.birthDate = '19890615';
test.onclick = function () {
alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
}
getAttribute/setAttribute
有些同学可能会问这和getAttribute/setAttribute除了命名有什么区别吗,我们来看一下
复制代码
var test = document.getElementById('test');
test.dataset.birthDate = '19890615';
test.setAttribute('age', 25);
test.setAttribute('data-sex', 'male');
console.log(test.getAttribute('data-age')); //24
console.log(test.getAttribute('data-birth-date')); //19890516
console.log(test.dataset.age); //24
console.log(test.dataset.sex); //male
复制代码
这样我们可以看出,两者都把属性设置到了attribute上(废话,要不人家能叫自定义属性),也就是说getAttribute/setAttribute可以操作所有的dataset内容,dataset内容只是attribute的一个子集,特殊就特殊在命名上了,但是dataset内只有带有data-前缀的属性(没有age=25那个)。
那么为什么我们还要用data-*呢,一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理,遍历啊神马的都哦很方便,而不至于零零散散了,所以用用还是不错的。
浏览器兼容性
比较不好的消息就是data-*的浏览器兼容性情况十分不乐观
Internet Explorer 11+
Chrome 8+
Firefox 6.0+
Opera 11.10+
Safari 6+
其中IE11+简直就是亮瞎小伙伴的眼,看来要想全面使用此属性路漫漫其修远矣
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
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
- 大小: 2 KB
- 大小: 49.6 KB
- 大小: 10.2 KB
- 大小: 59.1 KB
- 大小: 27.2 KB
分享到:
相关推荐
在jQuery的attr与prop提到过...使用data-*可以解决自定义属性混乱无管理的现状。 读写方式 data-*有两种设置方式,可以直接在HTML元素标签上书写 <div id=test data-age=24> Click Here 其中的data-age就是一种自定
本文讲述了关于HTML5的data-*自定义属性。分享给大家供大家参考,具体如下: 一、关于html元素的特性 1.html元素都存在一些标准的特性: id 元素在文档中的唯一标识符; title 有关元素的附加说明信息,一般...
HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放
HTML5如何添加自定义标签属性(data-自定义属性).zip
存储数据,这种自定义属性一般用“data-”开头。 存储的(自定义)数据能够被页面的 JavaScript 中利用。 data-* 属性包括两部分: * 属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符...
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险
在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情,下面为大家介绍下HTML5的自定义data-* 属性和jquery的data()方法的使用,感兴趣的朋友不要错过
可能大家在使用jquery mobile时,经常会看到data-role、data-theme等的使用,比如...我们写一个html页面,自定义一个data-chb=header的属性,希望具备这个属性的div区域背景颜色为黑色,文字为白色,居中显示;不具备da
一个尝试使用data- *属性将原始HTML与Javascript绑定以创建动态行为的小项目。 逻辑 任何元素都可以具有“数据模块”属性,该属性告知该元素将使用哪个模块,这是一个简单JavaScript函数,可以接受该元素并使用...
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据,这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情
评分 jQuery评级插件。 快速开始 提供几个快速入门选项: 。 ... 使用 npm install jquery.rateit ...快速,渐进增强,触摸支持,可自定义(只需交换图像或更改某些CSS),不引人注目JavaScript(使用HTML5 data- *属性
阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 “data-“开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。...
本文实例讲述了JS实现获取自定义属性data值的方法。分享给大家供大家参考,具体如下: HTML部分: <div id=tree data-leaves=47 data-plant-height=2.4m> js部分: var tree = document.getElementById(tree); //...
本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考,具体如下: jquery判断自定义属性data-val 1.css .active { color: red; } 2.html <li data-val=1>1 <li data-val=2>2 <li data-...