HTML5之Dataset

最新推荐文章于 2025-09-11 06:04:33 发布

原创最新推荐文章于 2025-09-11 06:04:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #dataset

本文介绍了HTML5中dataset API的使用方法，该API能够帮助开发者更便捷地操作元素的自定义属性。通过实例展示了如何利用dataset API获取指定元素的所有自定义属性。

在开发过程中，我们经常会用到元素的自定义属性data-**，在操作自定义属性的时候，可以通过JS的getAttribute()、setAttribute()；JQ的attr()或者data()。

HTML5提供了dataset API，可以更方便的获取元素所有的自定义属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="test" data-data-user="user1" data-name="name1">
		
	</div>
		
</body>
<script type="text/javascript">
	debugger;
	var test = document.querySelector("#test")
	console.log(test.dataset)//
	console.log(test.dataset.dataUser)//user1
    conaole.log(test.dataset.name)//name1
</script>
</html>

输出test.dataset