本文讲述了关于HTML5的data-*自定义属性。分享给大家供大家参考,具体如下:
一、关于html元素的特性
1.html元素都存在一些标准的特性:
id 元素在文档中的唯一标识符;
title 有关元素的附加说明信息,一般通过工具提示条显示出来;
lang 元素内容的语言代码,很少使用;
dir 语言的方向,很少使用;
className,与元素的class特性对应,考虑到与ECMAScript的保留字class的冲突,因此命名为className;
2.操作特性的方法:
getAttribute() 获取相关特性,也可以获取到自定义的特性,区别于使用DOM元素的属性获取;
setAttribute() 设置相关特性;
removeAttribute() 删除相关特性;
3.关于获取html元素特性中使用getAttribute()与直接使用DOM元素的属性获取的区别 :
例如:
var header=document.getElementById('header');
console.log(header.id);
//headerconsole.log(header.getAttribute('id'));
//headerconsole.log(header.title);
//testconsole.log(header.getAttribute('title'));
//testconsole.log(header.myTitle);
//undefinedconsole.log(header.getAttribute('myTitle'));
//monster1935
在本文示例中演示了通过两种方法获取html元素的标准特性以及自定义特性。可以发现:
getAttribute()既可以访问标准特性也可以访问自定义特性,而是用DOM元素本身属性访问html元素特性的时候只能访问标准特性。
原因:
html元素中只有标准特性才会以属性的形式添加到DOM对象中。
特殊情况:
有两类特性,虽有在DOM对象中有对应的属性名,但是属性的值与通过getAttribute()返回的值并不相同。
1.style特性:
使用DOM对象属性访问style的时候,返回的是一个对象,而使用getAttribute()方法获取的时候返回的是css文本。
2.事件处理程序(例如:onclick):
使用DOM对象的属性访问的时候,返回的是一个JavaScript函数,而通过getAttribute()方法获取时返回的是javas代码。
使用方法:
只有在获取自定义特性的时候使用getAttribute()方法,操作DOM的时候,使用对象的属性来获取。
二、Html5中的自定义属性
1.Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。
2.使用getAttribute()方法以及setAttribute()方法操作自定义属性。
例如:
var user=document.getElementById('user');
//使用attributes方法操作属性//获取相关属性值var name=user.getAttribute('data-name');
console.log(name)//monster1935var age = user.getAttribute('data-age');
console.log(age);
//123//设置相关属性值user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));
//male
上述示例中展示了使用getAttribute()以及setAttribute()方法操作html元素的自定义属性。
3.使用dataset操作自定义属性
例如:
var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset);
//返回的是一个DomStringMap对象console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);
以上示例展示了使用dataset属性来操作自定义属性。dataset属性的值是一个DOMStringMap的一个示例,是一个名值对的映射。在这个映射中,每个data-name的形式的属性都有一个对应的属性,不同的是属性名中没有data-前缀。(比如,自定义属性是data-name,映射中对应的属性就是name).还有一点需要注意的是如果data-属性名中包含了连字符(比如:data-date-of-birth),则映射中对应的属性为dateOfBirth,即转换为相应的驼峰格式来显示。
4.dataset属性的兼容性问题
Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+
5.使用data-属性选择器
1.获取相关DOM元素
var elem=document.querySelectorAll("[data-name='monster1935']");
2.设置相关css样式
<style> div{
width:100px;
height:200px;
margin:20px;
}
div[data-name="monster"]{
background-color: green;
}
div[data-name="monster1935"]{
background-color: red }
</style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 三个不常见的 HTML5 实用新特性简介
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- html5的自定义data-*属性和jquery的data()方法的使用示例
- javascript+html5+css3自定义弹出窗口效果