javascript制作颜色改变

最新推荐文章于 2024-04-23 17:09:12 发布

不问匆匆

最新推荐文章于 2024-04-23 17:09:12 发布

阅读量377

点赞数

分类专栏：新手文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44830974/article/details/89975979

版权

新手专栏收录该内容

40 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul,li{list-style-type: none;}
		ul li{float: left;width: 70px;height: 70px;border: 1px solid gray;margin-right: 15px;
			margin-bottom: 30px;}
		div{width: 200px;height: 200px;background-color: pink;clear: left;}
	</style>
</head>
<body>
	<ul id="menu">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div id="box"></div>
	<script type="text/javascript">
		var lis=document.getElementById('menu').children;
		var o=document.getElementById('box');
		/*for(var i=0;i<lis.length;i++){
			var num=parseInt(Math.random()*10);
			lis[i].style.backgroundColor='rgb((num*5*i),(20*(10-i),(num*(8-i))))';
			//追加点击事件
			lis[i].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
			};
		}*/
		lis[0].style.backgroundColor='red';
		lis[1].style.backgroundColor='blue';
		lis[2].style.backgroundColor='pink';
		lis[3].style.backgroundColor='black';
		lis[4].style.backgroundColor='green';
		lis[5].style.backgroundColor='yellow';
		//追加点击事件
		lis[0].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
			};
		lis[1].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
			};
		lis[2].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
		lis[3].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
		lis[4].onclick=function(){
					o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
		lis[5].onclick=function(){
				o.style.backgroundColor=window.getComputedStyle(this,null).backgroundColor;
		};
	</script>
</body>
</html>

不问匆匆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript制作颜色改变

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul,li{list-style-type: none;} ul li{floa...
复制链接

扫一扫