详解HTML5 data

日期:2021-02-23 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

在jQuery的attr与prop提到过在IE9以前版本号中假如应用property不善会导致运行内存泄漏难题,并且有关Attribute和Property的差别也令人10分头痛,在HTML5中加上了data-*的方法来自定特性,所谓data-*具体上上便是data-前缀再加自定的特性名,应用这样的构造能够开展数据信息储放。应用data-*能够处理自定特性错乱无管理方法的现况。

读写能力方法

data-*有两种设定方法,能够立即在HTML元素标识上撰写

<div id="test" data-age="24">
        Click Here
    </div>

在其中的data-age便是1种自定特性,自然大家还可以根据JavaScript来对其开展实际操作,HTML5中元素都会有1个dataset的特性,这是1个DOMStringMap种类的键值对结合

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

这样就为div加上了1个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加上了1些款式,看看实际效果

载入的情况下也是根据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);
        }

getAttribute/setAttribute

一些同学将会会问这和getAttribute/setAttribute除取名有甚么差别吗,大家看来1下

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

这样大家能够看出,二者都把特性设定到了attribute上(空话,要不人家能叫自定特性),也便是说getAttribute/setAttribute能够实际操作全部的dataset內容,dataset內容只是attribute的1个非空子集,独特就独特在取名到了,可是dataset内仅有带有data-前缀的特性(沒有age=25那个)。

那末为何大家还要用data-*呢,1个最大的益处是大家能够把全部自定特性在dataset目标中统1管理方法,遍历啊神马的都哦很便捷,而不至于零零散散了,因此用用還是非常好的。

访问器适配性

较为不太好的信息便是data-*的访问器适配性格况10分不开朗

  1. Internet Explorer 11+
  2. Chrome 8+
  3. Firefox 6.0+
  4. Opera 11.10+
  5. Safari 6+

在其中IE11+真是便是亮瞎小伙子伴的眼,来看要想全面应用此特性路漫漫其修远矣

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。