前端笔记88——自定义属性

最新推荐文章于 2025-03-13 17:22:22 发布

原创最新推荐文章于 2025-03-13 17:22:22 发布 · 754 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript #自定义属性

前端专栏收录该内容

93 篇文章

订阅专栏

在前端开发中，系统定义的属性有时无法满足需求，因此需要自定义属性。本文分享了一个自定义属性实现的实例，为前端开发提供参考。

前言

在日常的开发当中，我们会发现系统定义的属性没有办法满足我们的开发，所以我们需要自己去定义属性。下面分享一个定义属性的实例

自定义属性实现的实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box" index ="0"></div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var oBox = document.getElementById("box")
			// id是属于html内置的属性
			alert(oBox.id)
			// index属于我们自己定义的属性，这种就是自定义属性
			// 定义自定义属性，理解为oBox身上的变量，用来存储数据
			oBox.index = 10
			// 使用自定义属性
			alert(oBox.index)
			// 需求点击某个li弹窗对应li的下标
			var aLi = document.getElementsByTagName("li")
			for(var i = 0; i<aLi.length;i++){
				aLi[i].index = i+1
				aLi[i].onclick = function(){
					alert(this.index)
				}
			}
			// 事件处理函数执行的时候，for循环已经完成，意味着i已经加到5
		</script>
	</body>
</html>