jQuery的attr与prop关联过在IE玖从前版本中1经运用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有七个供给注意的地方

壹.
我们在丰硕或读取属性的时候须求去掉前缀data-*,像下面的例证大家并未有采用test.dataset.data-my =
‘Byron’;的情势。

二.
如若属性名称中还带有连字符(-),供给转成驼峰命名方式,但假如在CSS中行使选取器,我们供给使用连字符格式

为刚刚代码追加写内容

jQuery 1

<style type="text/css">
        [data-birth-date]
        {
            background-color: #0f0;
            width:100px;
            margin:20px;
        }
    </style>

jQuery 2

test.dataset.birthDate = '19890615';

这般我们因而JavaScript设置了data-birth-date自定义属性,在CSS样式表为div增加了一些样式,看看效果

jQuery 3

jQuery 4

读取的时候也是经过dataset对象,使用”.”来得到属性,一样供给去掉data-前缀,连字符须求转接为驼峰命名

jQuery 5

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);
        }

jQuery 6

jQuery 7

getAttribute/setAttribute

稍加同学只怕会问那和getAttribute/setAttribute除了命名有怎么着分歧吗,我们来看一下

jQuery 8

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

jQuery 9

jQuery 10

jQuery 11

那样我们得以观察,两者都把品质设置到了attribute上(废话,要不人家能叫自定义属性),也便是说getAttribute/setAttribute能够操作全部的dataset内容,dataset内容只是attribute的贰个子集,特殊就新鲜在命名上了,不过dataset内只有带有data-前缀的属性(未有age=2伍不行)。

那正是说为何大家还要用data-*啊,一个最大的好处是我们可以把全部自定义属性在dataset对象中联合管理,遍历啊神马的都哦很有利,而不致于零零散散了,所以用用依旧不错的。

浏览器包容性

比较不好的消息正是data-*的浏览器包容性情形十一分不乐观

  • Internet Explorer 11+
  • jQuery,Chrome 8+
  • Firefox 6.0+
  • Opera 11.10+
  • Safari 6+

其间IE11+几乎正是亮瞎小伙伴的眼,看来要想周密选拔此属性路漫漫其修远矣

相关文章

网站地图xml地图