详解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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 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
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python中__slots__用法实例
2015/06/04 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python模糊图片过滤的方法
2018/12/14 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
作风年建设汇报材料
2014/08/14 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript