h5自定义属性

最新推荐文章于 2024-02-01 22:05:42 发布

hcoke

最新推荐文章于 2024-02-01 22:05:42 发布

阅读量1.9k

点赞数 1

文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/123442756

版权

自定义属性的目的:为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性不能通过元素.属性名的方式来获取，结果为undefined。

有些属性容易引起歧义，我们不容易分辨出是内置属性还是自定义属性。

1.h5自定义属性

h5规定自定义属性 date- 为开头作为属性名并且赋值

比如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div data-index= '1'></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			console.log(div.dataset.index);
		</script>
	</body>
</html>

或者用js来设置

div.setAttribute('data-index',1);

h5也新增了获取自定义属性的方法

console.log(div.dataset.index);  // 1
console.log(div.dataset['index']);  // 1  获取对象的属性这两种方法均可
//假如属性名中含有多个- 我们获取属性的时候采用驼峰命名法
<div data-time-now= '1'></div>
console.log(div.dataset.timeNow);  // 1
console.log(div.dataset['timeNow']);  // 1

dataset是一个集合，存放了所有以data为开头的所有属性

hcoke

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
h5自定义属性

自定义属性的目的:为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性不能通过元素.属性名的方式来获取，结果为undefined。有些属性容易引起歧义，我们不容易分辨出是内置属性还是自定义属性。1.h5自定义属性h5规定自定义属性 date- 为开头作为属性名并且赋值比如<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>
复制链接

扫一扫