详解HTML5 data-* 自定义属性


Posted in HTML / CSS onJanuary 24, 2018

在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添加了一些样式,看看效果

详解HTML5 data-* 自定义属性

详解HTML5 data-* 自定义属性

读取的时候也是通过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);
        }

详解HTML5 data-* 自定义属性

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

详解HTML5 data-* 自定义属性

详解HTML5 data-* 自定义属性

这样我们可以看出,两者都把属性设置到了attribute上(废话,要不人家能叫自定义属性),也就是说getAttribute/setAttribute可以操作所有的dataset内容,dataset内容只是attribute的一个子集,特殊就特殊在命名上了,但是dataset内只有带有data-前缀的属性(没有age=25那个)。

那么为什么我们还要用data-*呢,一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理,遍历啊神马的都哦很方便,而不至于零零散散了,所以用用还是不错的。

浏览器兼容性

比较不好的消息就是data-*的浏览器兼容性情况十分不乐观

  1. Internet Explorer 11+
  2. Chrome 8+
  3. Firefox 6.0+
  4. Opera 11.10+
  5. Safari 6+

其中IE11+简直就是亮瞎小伙伴的眼,看来要想全面使用此属性路漫漫其修远矣

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 #HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 #HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 #HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 #HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 #HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 #HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 #HTML / CSS
You might like
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php微信公众号开发之简答题
2018/10/20 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
JS抛物线动画实例制作
2018/02/24 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python文件操作方法详解
2020/02/09 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
正规的求职信范文分享
2013/12/11 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
工作决心书
2014/03/11 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
六五普法心得体会2016
2016/01/21 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
golang中的空slice案例
2021/04/27 Golang