关于JS点击按钮改变颜色的问题，

js

解决方案 »

  1.   

    css属性值在读取时不一定和之前设置的格式一样。
    比如
    oDiv.style.backgroundColor设置为'#FF0000'，再读取就成了'rgb(255, 0, 0)'<style type="text/css">
    #div1{width:200px; height:200px; background:#000;}
    </style>
    <script>
    function show()
    {
        var oDiv=document.getElementById('div1');
    if(oDiv.style.backgroundColor!='rgb(255, 0, 0)')               //如果把这里和下面的两个颜色值互换一下
    {
       oDiv.style.backgroundColor='#FF0000';                        //是可以变红的
    }
    else
    {
       oDiv.style.backgroundColor='#000';                                 //但是再点一下就不会变回黑色了
    }
    }
    </script>
    <body>
    <input type="button" value="变色" onclick="show()" />
    <div id="div1"></div>
      

  2.   

    又仔细看了一下，有两个地方的错误；
    第一个是if判断时是要加#的，而下面加不加都可以。第二个是background写错了，写成dbackground='FF0000'; 现在可以了，那么问题来了。
    function show() 
    {     
        var oDiv=document.getElementById('div1');     
    if( oDiv.style.background=='#000')           //为什么这里要加#   
     {       
      oDiv.style.background='FF0000';            //这里就不用加# 
     }    
     else    
     {        
     oDiv.style.background='000';                //这里也不用加#   
      } 
    }
      

  3.   

    不是说了，css属性值在读取时不一定和之前设置的格式一样，而且不同的浏览器或版本读取时的样式格式可能也不一样。<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <script type="text/javascript">
    document.body.style.background='#F00';
    alert(document.body.style.background);//输出的不一定是#F00
    </script>
    </body>
    </html>