2

クリックするたびに入力ボタンの色を変更することを目的としたコードのこの部分があります。

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 に戻りません。まだ白いです。これを修正するにはどうすればよいですか?

4

3 に答える 3

4

これelement.style.backgroundは、 が形式で値を返すためrgbです。条件ifステートメントを変更して適切なrgb値を確認すると、正常に機能するはずです。

その行を次のようにします。

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

コードを修正してクリーンアップしたデモ

于 2012-08-20T13:27:03.723 に答える
1

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一部のブラウザにある可能性があります。これを確認する必要があります。ところで。コードはテストされていません

于 2012-08-20T13:42:46.473 に答える
0 
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/ </p>

于 2012-08-20T13:29:51.817 に答える