DOM事件练习1

news2024/11/28 16:37:15

DOM事件练习1

1. 演示效果

QQ录屏20240214203353 -original-original

2. 代码分析

用 ul 创建四个 li 列表
整个列表的背景是红色的，鼠标悬浮在列表上，一行的变为蓝色
点击任意列表，整个列表的背景变为白色，被点击的列表变为粉色
需要用到 js 的点击事onclick件和forEach循环

3. 代码演示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			li {
				width: 100%;
				height: 30px;
				background-color: rgb(226, 76, 76);
				border: 1px soild #ccc;
				list-style: none;
				cursor: pointer;
			}
			li:hover {
				background-color: rgb(15, 157, 227);
			}
		</style>
	</head>
	<body>
		<li>我是列表1</li>
		<li>我是列表2</li>
		<li>我是列表3</li>
		<li>我是列表4</li>
		<li>我是列表5</li>

		<script>
			const lis = document.querySelectorAll("li");
			console.log(lis);
			// 循环lis，给每个li一个点击事件，点击行换色
			lis.forEach((li) => {
				li.onclick = () => {
					// 每次要将所有的li颜色设置
					lis.forEach(
						(item) => (item.style.backgroundColor = "white")
					);
					li.style.backgroundColor = "pink";
				};
			});
		</script>
	</body>
</html>