HTML5新特性:自定义数据属性data-*

html是允许我们自定义标签和属性的,我们一般经常用自定义属性在界面存储一些数据,类似于使用Hidden控件。

<script>
window.onload = function(){
	console.log($("#test1").attr("name"));
	console.log(document.getElementById("test2").getAttribute("name"));

	$("#test1").attr("age",25);
	document.getElementById("test2").setAttribute("age",25);
}
</script>

<body>
	<div id="test1" name="aty" age="26"></div>
	<div id="test2" name="aty" age="26"></div>	
</body>


可以看到我们能够像操作html内置属性(name)一样,操作我们自定义的属性(age)。



一些常见的前端框架比如angularJS使用了很多自定义的标签和属性,比如ng-model,ng-repeat等。这种自定义属性的方式没有标准,使用也很随意,容易导致混乱和冲突。HTML5规范里增加了一个自定义data属性.自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。


比如下面这段html中,我们使用data-*自定义属性。

<div id="a" data-name="a" data-hobby_list="swim" data-config-options='{"type":"a"}'>
</div>


自定义属性的读取和设置操作方式如下:

window.onload = function(){
	var element = document.getElementById("a");
	console.log(element.dataset.name);
	console.log(element.dataset.hobby_list);

	// html里面的连字符转换成驼峰式
	console.log(element.dataset.configOptions);

	element.dataset.name = "update";
	element.dataset.non_exsit = "oo";

	// 驼峰式转换成html里面的连字符
	element.dataset.hisLover = "xx";
}


最后生成的dom如下图:



使用HTML5中自定义属性的几点总结:

1.自定义属性名称不要使用大写字母、连字符等特殊符号。上面我们看到连字符会被转换成驼峰式。我们就用:小写字母和下划线就好了,比如his_lover这种命名方式,既简单易读也不会有特殊字符的影响。

2.js中如果要获取或者设置自定义属性的值,需要去掉data-这个固定前缀。


3.如果修改了自定义属性的值,会导致HTML中dom的刷新。这一点很好理解,这里提一下是因为后面我们会使用jQuery来操作自定义属性,但是jquery不会刷新dom。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值