在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中动用选择器,我们要用连字符格式

为才代码追加写内容

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=25挺)。

那为什么咱们还要用data-*也,一个太充分的便宜是我们得以拿装有由定义属性在dataset对象被集合保管,遍历啊神马的且哦很有益于,而不致于零零散散了,所以用用要不错的。

浏览器兼容性

比较糟糕的信息就是data-*的浏览器兼容性情况大请勿明朗

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

其中IE11+简直就是显得瞎小伙伴的眼眸,看来要想全面运用此属性路漫漫其编制远矣

相关文章

网站地图xml地图