点击相应按钮,把此处背景变为相应颜色! (if语句的做法) （抄写。。。。）-CSDN博客

编辑器加载中...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body,td,th {
 font-size: 12px;
}
ul{margin-top:15px}
*{padding:0;margin:0;list-style:none}
li{float:left;width:80px;height:80px;margin-right:10px;cursor:pointer}
.blue{background:#00F}
.yellow{background:#FF0}
.green{background:#6C0}
.aaa{background:#33FFFF}
body {
 margin-left: 30px;
 margin-top: 30px;
 margin-right: 30px;
 margin-bottom: 30px;
}
-->
</style></head>

<body>
<div id="colorDiv" style="border:1px solid #f00;width:250px;height:250px;clear:both;"></div>
<div>
<ul>
<li class="blue" onclick="a('blue')"></li>
<li class="yellow" onclick="a('yellow')"></li>
<li class="green" onclick="a('green')"></li>
<li class="aaa" onclick="a('aaa')"></li>
</ul>
</div>
<script language="javascript">
function a(color) 
    { 
var obj = document.getElementById('colorDiv') 
if (color== 'blue')                           
      {  obj.style.background='#00F'; } 
else if (color=='yellow')  
      {  obj.style.background='#FF0'; } 
else if (color=='green')   
      {  obj.style.background='#6C0'; } 
else if (color=='aaa')  
      {  obj.style.background='#33FFFF'; }  
else   {     alert('输入有误');   }
       }
</script>
</body>
</html>