详解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实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
学习python的前途 python挣钱
2019/02/27 Python
pycharm显示远程图片的实现
2019/11/04 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
付款承诺函范文
2015/01/21 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
实现一个简单得数据响应系统
2021/11/11 Javascript
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android