<!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>
javascript制作颜色改变
猜你喜欢
转载自blog.csdn.net/weixin_44830974/article/details/89975979
今日推荐
周排行