<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击改变背景颜色</title>
<script language="javascript">
function changecolor(){
x = document.getElementById("odiv");
    x.style.background="#000000"?"#ffffff":"#000000";
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#odiv{
width:100px;
height:100px;
background:#0F0;
border:2px solid #000000;
}
</style>
</head><body>
<a href="#" onclick="changecolor()">链接</a>
<div id="odiv"></div>
</body>
</html>第一次点击链接#odiv的背景颜色可以改变,为什么以后的点击脚本不会执行呢

解决方案 »

  1.   

    因为第一次进去肯定不成立 就变成了 #000000
    第二次进去还是不会成立因为 获取到的是 “none repeat scroll 0% 0% rbg(0,0,0,)”
    样式属性不是你放进去什么值 获取出来就是什么值,它有它自己的一套解析方式。 
    所次 你每次点击 都会改变成 #000000 其实代码是一直执行的 只是没效果而已
      

  2.   

    把JS代码改成以下:
    function changecolor(){
        x = document.getElementById("odiv");
        x.style.backgroundColor=x.style.backgroundColor.toString()=="#000000"?"#ffffff":"#000000";
    }
      

  3.   

    试试这个
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>点击改变背景颜色</title>
    <script language="javascript">
    function changecolor(){
        x = document.getElementById("odiv");
    alert(x.style.backgroundColor);
        x.style.backgroundColor = x.style.backgroundColor == "rgb(255, 255, 255)"?"#000000":"#ffffff";
    }
    </script>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #odiv{
        width:100px;
        height:100px;
        background:#0F0;
        border:2px solid #000000;
    }
    </style>
    </head><body>
    <a href="#" onclick="changecolor()">链接</a>
    <div id="odiv"></div>
    </body>
    </html>
      

  4.   

    补充一下 backgroundColor 
    ie 输出 #ffffff
    firefox 输出 rgb(255, 255, 255)
    所以要判断一下
      

  5.   

    因为你页面加载出来的时候,div通过css样式document.getElementById("odiv")获得的是#0F0,而但你点击onclick的时候你用三元运算判断,为#000000匹配则显示#ffffff,不成立则显示#000000
    你在控制颜色的变换时。再仔细看看。。用if语句判断试试
      

  6.   

    不好意思其实odiv的style是background:#000000;
      

  7.   

    补充上面回答,在做JS的时候,一定要用alert进行调试,才能知道该方法到底执没执行!
      

  8.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
    <title>点击改变背景颜色</title>
    <script language="javascript">
    function changecolor(){
        x = document.getElementById("odiv");
    x.style.backgroundColor=x.style.backgroundColor.toString()=="#000000"?"#ffffff":"#000000";
    }
    </script>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #odiv{
        width:100px;
        height:100px;
        background:#000000;
        border:2px solid #000000;
    }
    </style>
    </head><body>
    <a href="#" onclick="changecolor()">链接</a>
    <div id="odiv"></div>
    </body>
    </html>你看你想达到的是这种效果吗?
      

  9.   

    alert(x.style.background);
    你要的是color
    alert(x.style.backgroundColor);
      

  10.   

    function changecolor(){
        x = document.getElementById("odiv");
        x.style.backgroundColor=x.style.backgroundColor.toString()=="#000000"?"#ffffff":"#000000";
    }
      

  11.   

    var count=0;
    function changecolor(){
        var x = document.getElementById("odiv");
        x.style.background=(count++)%2==0?"#ffffff":"#000000";
    }