点击li背景发生变化

最新推荐文章于 2023-02-13 20:07:02 发布

玛丽大

最新推荐文章于 2023-02-13 20:07:02 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

文章标签： JS

本文链接：https://blog.csdn.net/qq_36937220/article/details/102535545

本文介绍如何利用JavaScript实现用户点击列表项（li）时，改变其背景色的效果。通过添加事件监听器，当点击li元素时，动态修改CSS属性，达到高亮选中状态的目的，为网页交互增加用户体验。

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

<!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 type="text/css" media="screen">
		#canvas{
			width: 100%;
			height: 500px;
		}
		ul li{
			list-style: none;
			float: left;
		}
		li:nth-of-type(1){
			background: red;
			color: white;
		}
		li:nth-of-type(2){
			background: green;
			color: white;
		}
		li:nth-of-type(3){
			background: blue;
			color: white;
		}
	</style>
</head>
<body>
	<div id="canvas"></div>
	<ul>
		<li>红色</li>
		<li>绿色</li>
		<li>蓝色</li>
	</ul>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var ul = document.getElementsByTagName("ul")[0];
		ul.addEventListener('click',function(event){
			var that = event.target;
			canvas.style.background = getStyle(that,'background');
		})
		//读取样式表数据
		function getStyle(obj,name){
			return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
		}
	</script>
</body>
</html>