web前端：自定义属性，自定义一组开关应用——点击图片，图片的替换，自定义一个开关（onOff=true表示开，onOff=false表示关）

一：

主要讨论HTML标签属性
自定义属性（概念）：元素本身没有这个属性，属于自己定义的属性

举例说明：
1）例如：为按钮添加一个abc属性，并且为其属性赋值（abc=123），或者修改值（abc=456）：

<body>
	<input type="button" value="按钮" >
	<script type="text/javascript">
		var aBtn=document.getElementsByTagName("input");
		aBtn[0].abc=123;//在button中加一个abc的属性——即自定义属性叫abc=123
		//
		//对自定义属性进行读，即访问属性
		//alert(aBtn[0].abc);//访问abc属性
		//
		//对自定义属性进行修改
		aBtn[0].abc=456;
		alert(aBtn[0].abc);
	</script>
</body>

2）例如：当有3个按钮时，分别为其按钮添加abc这个属性：

<body>
	<input type="button" value="按钮1" >
	<input type="button" value="按钮2" >
	<input type="button" value="按钮3" >
	<script type="text/javascript">
		var aBtn=document.getElementsByTagName("input");
		//因为不只有一个按钮，所以需要用到for循环——操作多个元素
		//同时给3个按钮添加abc属性
		**//JS可以为任何HTML元素添加任意个自定义属性**
		for(var i=0;i<aBtn.length;i++){
			aBtn[i].abc=123;
		}
	</script>
</body>

二：自定义属性的实际应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>尝试的path</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
	<style type="text/css">
		li{
			list-style: none;width: 114px;height: 140px;background: url('img/pikaqiu1.PNG');margin-right: 20px;
		}
	</style>

</head>
<body>
	<!--点击时，选中页面元素-->
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<script type="text/javascript">
		window.onload = function(){
			var aLi = document.getElementsByTagName("li");
			var onOff=true;//设置一组开关
			
			//不能作为for循环中的判断条件：
			//背景不能判断
			//color red #f00也不能作为判断条件
			//相对路径也不行
			//但是可以用开关onOff=true或者onOff=false//但是一个开关只能控制一组，所以需要用到在li中的自定义<li onOff=true></li>——则自定义属性，则可以aLi[i].onOff=true;

			for(var i=0;i<aLi.length;i++){
				aLi[i].onOff=true; //为li属性自定义onOff属性（即自定义属性），表示开关
				aLi[i].onclick = function(){
					if(this.onOff){  //用到this指向，指向这个aLi，而不是window
						this.style.background='url(img/pikaqiu1.PNG)';
						this.onOff = false;
					}else{
						this.style.background='url(img/pikaqiu3.PNG)';
						this.onOff = true;
					}
				}
			}
		}
	</script>
</body>
</html>

在这里插入图片描述
点击其中一个li图片转换哟！

原文链接：https://blog.csdn.net/weixin_43170073/article/details/90347967