HTML5之Dataset

最新推荐文章于 2024-04-22 10:57:48 发布

五花毛

最新推荐文章于 2024-04-22 10:57:48 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： html5 dataset

本文链接：https://blog.youkuaiyun.com/Hanhanyoona/article/details/81081104

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中，我们经常会用到元素的自定义属性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