用if语句切换背景：

HTML结构：

<div id="colorDiv" style="border:1px solid #f00;width:250px;height:250px;clear:both;"></div>
<ul>
<li class="blue" onclick="changeColor('blue')"></li>
<li class="yellow" onclick="changeColor('yellow')"></li>
<li class="green" onclick="changeColor('green')"></li>
</ul>

JS书写：

    <script type="text/javascript">

function changeColor(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
            {
                alert('输入有误');
             }
        }
    </script>

CSS书写：

<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}
body {margin-left:30px;margin-top:30px; margin-right:30px;margin-bottom:30px;}
-->
</style>

 

转载于:https://www.cnblogs.com/pqw1991/archive/2012/02/29/2373927.html