js点击事件_js单击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40030173/article/details/95040830

本文介绍两种常见的JavaScript点击事件应用：一是通过点击事件切换元素的样式类，实现颜色和背景变化；二是利用点击事件控制两个图标的一显一隐效果。这两种技巧在网页交互设计中非常实用。

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

js点击事件

1、点击事件切换class

		<style type="text/css">
			.aa {
				color:#000;
				background-color: red;
			}
			.bb {
				color: #fff;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="aa" id="demo">hello everyone</div>
		</div>
		<script type="text/javascript">
			var demo = document.getElementById('demo')
			var str = document.getElementById('box').childNodes;
			demo.onclick = function() {
				if (str[1].className == 'aa') {
					for (var i = 0; i < str.length; i++) {
						str[i].className = 'bb';
					};
				} else {
					for (var i = 0; i < str.length; i++) {
						str[i].className = 'aa';
					}
				}
			}
		</script>

2、点击事件显示隐藏两个图标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1279273_ztarxh8aplk.css">
		<style type="text/css">
			#aa {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<i class=" iconfont icon-icon-test" id="aa"></i>
			<i class="iconfont icon-icon-test1" id="bb"></i>
		</div>
		<script type="text/javascript">
			var box = document.getElementById('box')
			var aa = document.getElementById('aa');
			var bb = document.getElementById('bb')
			box.onclick = function() {
				if (aa.style.display == 'none') {
					aa.style.display = "block";
					bb.style.display = "none";
				} else {
					aa.style.display = "none";
					bb.style.display = "block";
				}
			}
		</script>

	</body>
</html>