HTML5的自定特性data

日期:2020-12-11 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

自然高級访问器下可根据脚本制作开展界定和数据信息存储。在新项目实践活动中十分有效。

比如:

拷贝编码
编码以下:
<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' , 'https://www.jb51.net' ) ;

此方式能在全部的当代访问器中一切正常工作中,但它并不是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' , 'https://www.jb51.net' ) ;
</script>

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

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

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

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

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

拷贝编码
编码以下:

<div id="user" data-id="1234567890" 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);//1个DOMStringMap
console.log(el.dataset.id); // '1234567890'
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>

假如你想删除1个 data-特性 ,能够这么做: delete el . dataset . id ; 或 el .dataset . id = null ; 。

看起来很美,哈哈,可是悲剧的是,新的 dataset 特性仅有在Chrome 8+ Firefox(Gecko) 6.0+ Internet 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 class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > 港口 </div>