HTML 5 的data

摘要: div id="user" data-uid="12345" data-uname="愚人港口" /div 应用attribute方式存储data-*自定特性的值应用attributes方式存储data-*自定特性的值十分便捷:// 应用getAttribute获得 data- 特性var user = document...

div id="user" data-uid="12345" data-uname="愚人港口" /div

应用attribute方式存储data-*自定特性的值

应用attributes方式存储data-*自定特性的值十分便捷:

// 应用getAttribute获得 data- 特性

var user = document.getElementById('user');

var userName = plant.getAttribute('data-uname'); // userName = '愚人港口'

var userId = plant.getAttribute('data-uid'); // userId = '12345'

// 应用setAttribute设定 data- 特性

user.setAttribute('data-site', 'p>

此方式能在全部的当代访问器中一切正常工作中,但它并不是HTML 5 的自定 data-* 特性被应用目地,要不然与我们之前应用的自定特性就沒有甚么差别了,比如:

div id="user" uid="12345" uname="愚人港口" /div

script

// 应用getAttribute获得 data- 特性

var user = document.getElementById('user');

var userName = plant.getAttribute('uname'); // userName = '愚人港口'

var userId = plant.getAttribute('uid'); // userId = '12345'

// 应用setAttribute设定 data- 特性

user.setAttribute('site', 'p>

/script

这类“初始”的自定特性和上边data-*自定特性没有什么差别,专业知识特性名不一样。

dataset特性存储data-*自定特性的值

这类方法根据浏览一个原素的dataset特性来存储data-*自定特性的值。这一dataset特性是HTML5 JavaScript API的一一部分,用于回到一个全部挑选原素data-特性的DOMStringMap目标。

和attributes方式较为:

data-*关键是对自定特性干了规范化;循环系统赋值的情况下dataset特性较为便捷,也有并不是难题的难题便是自定的attribute都不合乎html标准(热烈欢迎留言板留言填补)。

应用这类方式时,并不是应用详细的特性名,如data-uid来存储数据信息,应当除掉data-作为前缀。

也有一点非常留意的是:data-特性名假如包括了连标识符,比如:data-date-of-birth,连标识符将被除掉,并变换为驼峰式的取名,前边的特性名变换后应当是:dateOfBirth。

div id="user" data-id="" data-name="愚人港口" data-date-of-birth 港口 /div

script type="text/javascript"

var el = document.querySelector('#user');

console.log(el.id); // 'user'

console.log(el.dataset);//一个DOMStringMap

console.log(el.dataset.id); // ''

console.log(el.dataset.name); // '愚人港口'

console.log(el.dataset.dateOfBirth); // ''

el.dataset.dateOfBirth = '1985-01-05'; // 设定data-date-of-birth的值.

console.log('someDataAttr' in el.dataset);//false

el.dataset.someDataAttr = 'mydata';

console.log('someDataAttr' in el.dataset);//true

/script

假如你要删除一个data-特性,能够那么做: delete el.dataset.id; 或是 el.dataset.id=null; 。

看上去很美,嘿嘿,可是悲剧的是,新的dataset特性仅有在Chrome 8+ Firefox(Gecko) 6.0+ Explorer 11+ Opera 11.10+ Safari 6+访问器中完成,因此在这段时间功能强大的getAttribute和setAttribute来实际操作。

有关data-特性挑选器

在具体开发设计时,您将会会发觉它很有效,你可以以依据自定的data-特性挑选有关的原素。比如应用querySelectorAll挑选原素:

// 挑选全部包括 'data-flowering' 特性的原素

document.querySelectorAll('[data-flowering]');

// 挑选全部包括 'data-text-colour' 特性数值red的原素

document.querySelectorAll('[data-text-colour="red"]');

一样的大家还可以根据data-特性值对相对的原素设定CSS款式,比如下边这一事例:

style type="text/css"

.user {

width: 256px;

height: 200px;

}

.user[data-name='feiwen'] {

color: brown

}

.user[data-name='css'] {

color: red

}

/style

div data-id="123" data-name="feiwen" 1 /div

div data-id="124" data-name="css" 港口 /div




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503