浅谈HTML5的新特性——data-*自定义属性

HTML5增加了一个新特性——data-*自定义属性。

可以往HTML标签上添加任意以 "data-"开头的属性,这些属性在页面上是不显示的,即不会影响到页面布局和风格,但它却是可读可写的。

使用data-*自定义属性可以解决自定义属性混乱无管理的现状。

<input id="username" data-age="23">

1、getAttribute()和setAttribute()方法存取传统的自定义属性的值

var username = document.getElementById('username');
// 使用setAttribute设置自定义属性
username.setAttribute ( 'blog' , 'http://blog.csdn.net/zhouziyu2011');
// 使用getAttribute获取自定义属性:
alert(username.getAttribute('age')); // 输出:23
alert(username.getAttribute('blog')) ; // 输出:http://blog.csdn.net/zhouziyu2011


2、getAttribute和setAttribute方法存取data-*自定义属性的值

var username = document.getElementById('username');
// 使用setAttribute设置 data- 属性
username.setAttribute ( 'data-blog' , 'http://blog.csdn.net/zhouziyu2011');
// 使用getAttribute获取data-*属性:
alert(username.getAttribute('data-age')); // 输出:23
alert(username.getAttribute('data-blog')) ; // 输出:http://blog.csdn.net/zhouziyu2011

getAttributesetAttribute方法能在所有浏览器中正常工作,和传统的自定义属性没有什么区别,只是属性名不一样,没有体现HTML
5
data-*自定义属性的真正目的。

 

3、dataset属性存取data-*自定义属性的值

dataset属性是HTML5 JavaScript API的一部分,用来返回一个包含选择元素的所有data-*属性的DOMStringMap对象。

使用dataset属性时,不使用完整的属性名,应该去掉data-前缀,如 data-age属性名转换后应该是age。

data-属性名如果包含了连字符,去掉data-前缀后需要转换为驼峰式命名,如data-date-of-birth属性名转换后应该是dateOfBirth 。

var username = document.getElementById('username');
// 使用dataset设置 data- 属性
username.dataset.dateOfBirth = '1993-12-06';
// 使用dataset获取data-*属性:
alert(username.dataset.age) ; // 输出:23
alert(username.dataset.dateOfBirth) ; // 输出:1993-12-06

然而,新的dataset属性只在Chrome 8+、Firefox(Gecko) 6.0+、IE 11+、Opera 11.10+、Safari 6+中实现,所以最好还是getAttribute和setAttribute来操作。

 

4、data-*属性选择器

(1)jQuery选择器:

$("input[data-age]").css("background","red");


(2)CSS属性选择器:

input[data-age] {
	background:red;
}

IT文库 » 浅谈HTML5的新特性——data-*自定义属性
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址