HTML/CSS3实现点击元素变色效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43889418/article/details/122389442

本文介绍如何使用HTML和CSS3创建一个点击后颜色改变的交互效果，同时探讨JavaScript如何进一步增强用户体验。

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

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>黑白块</title>
	<style type="text/css">
		.div1{
			width:500px;
			height:500px;
			background:red;
		}
		.div2{
			width:98px;
			height:98px;
			border:1px solid #fff;
			float: left
		}
		.black{
			width:98px;
			height:98px;
			border:1px solid #fff;
			float: left;
			background:#000;
		}
		.white{
			width:98px;
			height:98px;
			border:1px solid #000;
			float: left;
			background:#fff;
		}

	</style>
</head>
<body>
	<div id="div1" class="div1">
	</div>
	<script type="text/javascript">
		var div11 = document.getElementById("div1")
		for(let y = 0;y<5;y++){
			for(let x = 0;x<5;x++){
				let div2 = document.createElement("div")
				div2.id = y+""+ x
				div2.className = "black"
				div2.addEventListener("click",function(e){
					let eId = e.target || e.currentTarget

					cAA(eId)

					classN(eId)
				})
				div11.appendChild(div2)
			}

		}
		function cAA(vid){

			let top = parseInt(vid.id)-10
			let bottom = parseInt(vid.id)+10
			let left = parseInt(vid.id)-1
			let right = parseInt(vid.id)+1
			if(top>=0){
				top = top<5? "0"+top:top
				classN(document.getElementById(top))
			}
			if(bottom<45){
				classN(document.getElementById(bottom))
			}
			if((left>=0 && left<4)||(left>9 && left<14)||(left>19 && left<24)||(left>29 && left<34)||(left>39 && left<44)){

				left = left>=0 && left<10 ? "0"+left : left
				classN(document.getElementById(left))
			}
			if((right>0 && right<5)||(right>10 && right<15)||(right>20 && right<25)||(right>30 && right<35)||(right>40 && right<45)){

				right = right>0 && right<10 ? "0"+right : right
				classN(document.getElementById(right))
			}

			//console.log(right)
		}

		function classN(id){
			if(id.className == "black"){
				id.className = "white"
			}else if(id.className == "white"){
				id.className = "black"
			}
		}
	</script>
</body>
</html>

html-黑白点击变色