详解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感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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
杏林同学录(四)
2006/10/09 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年机关党委工作总结
2015/05/23 职场文书