Question

我有这部分代码，用于在每次单击时更改输入按钮的颜色。

function colorchange(id) 
 {
   if(document.getElementById(id).style.background == '#FFFFFF')
  {
   document.getElementById(id).style.background = '#000000';
  }
 else
  {
   document.getElementById(id).style.background = '#FFFFFF';
  }
 }

<input type="button" id="k777" onclick="colorchange('k777');" style="background:#000000;"/>

然而，这不能正常工作。第一次点击按钮时，它确实会将按钮的颜色从＃000000更改为#FFFFFF，但是当我再次单击它时，它不会变回＃000000。它还是白色的。我该如何解决这个问题？

Answer 1

这是因为element.style.background以rgb格式返回值。更改条件if语句以检查相应的rgb值，它应该可以正常工作。

这一行：

if(document.getElementById(id).style.background !== 'rgb(0, 0, 0)')

Demo, with your code fixed and cleaned up

Answer 2

尝试通过css-classes

解决它

这里是HTML：

<style type="text/css">
    input.bg_1{
        background-color: #000";
    }
    input.bg_2{
        background-color: #fff;
    }
</style>
<input type="button" id="input_777" onclick="colorchange('input_777');" class="bg_1" value="hello world" />

JS：

function colorchange(id){
    var item = document.getElementById(id);
    if(item.getAttribute('className') == 'bg_1'){
        item.setAttribute('className', 'bg_2');
    } else {
        item.setAttribute('className', 'bg_1');
    }
}

在某些浏览器中，属性可能是class。你必须检查这个。顺便说一句。代码未经过测试

Answer 3

function colorchange(id) 
 {

     var background = document.getElementById(id).style.background;

     if(background === "rgb(255,255,255)")
     {
     document.getElementById(id).style.background = "rgb(0,0,0)";
     }
     else
     {
        document.getElementById(id).style.background = "rgb(255,255,255)"; 
     }

 }

因为它的RGB值，

它在这里工作http://jsfiddle.net/nE8SW/

切换按钮的背景颜色

3 个答案: