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

最新推荐文章于 2022-04-16 22:01:20 发布

aitangyong

最新推荐文章于 2022-04-16 22:01:20 发布

阅读量6.7k

点赞数

分类专栏： HTML5 文章标签： data- html自定义属性 html5 dataset

本文链接：https://blog.csdn.net/aitangyong/article/details/50316397

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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中自定义属性的几点总结：