2012-04-09 6 views
19

part 1 onclick divスタイルが変更され、part 2が再度クリックすると正常に戻ります。私はそうしようとしたが、私はpart 2の結果を達成することに失敗した。続きJavascriptの変更Divスタイル

は、あなたがクリックする前にもう一度、色は色すなわち黒をdefaulrするために戻ってくる必要がありDIV ...

+1

ポストあなたのイベントあなたの場合、文、なぜ '色= "黒"'と ''色= "赤" のコード –

答えて

31
function abc() { 
    var color = document.getElementById("test").style.color; 
    if (color === "red") 
     document.getElementById("test").style.color="black"; 
    else 
     document.getElementById("test").style.color="red"; 
} 
+0

を結合。 あなたはすでに色を持っています –

+1

@AbdullahGheith 'color'は変数の* name *です。私はそれを「ボブ」または何でも欲しいものと名付けることができた。私は 'color'で色を保存しました。 –

+0

私はif後の行とelseの後の行を意味します。 –

0

あなたは色をチェックして、テストをクリックした後

function abc() { 
    document.getElementById("test").style.color="red"; 
} 

Javascriptのコードですそれを変更する。

function abc(){ 
    var color = document.getElementById("test").style.color; 
    if(color==''){ 
     //change 
    }else{ 
     //change back 
    } 
} 
1

簡単なswitch文は、トリックを行う必要があり

function abc() { 
    var currentColor = document.getElementById("test").style.color; 

    if(currentColor == 'red'){ 
    document.getElementById("test").style.color="black"; 
    }else{ 
    document.getElementById("test").style.color="red"; 

    } 
} 
+0

これはすべてのブラウザで動作しない可能性があります –

0

、色をチェックしたり、いくつかのフラグを持っているいくつかのロジックを持っている:

function abc() { 
    var elem=document.getElementById('test'),color; 
    switch(elem.style.color) { 
     case('red'): 
      color='black'; 
      break; 
     case('black'): 
     default: 
      color='red'; 
    } 
    elem.style.color=color; 
} 
0
function abc() { 
    var color = document.getElementById("test").style.color; 
    color = (color=="red") ? "black" : "red" ; 
    document.getElementById("test").style.color= color; 
} 
0

良いのクラスを変更要素(.regularは黒、.alertは赤):

jQueryのを使用して
2

$(document).ready(function(){ 
    $('div').click(function(){ 
     $(this).toggleClass('clicked'); 
    }); 
});​ 

Live example

+0

良い例です!シンプルでクール! :) –

関連する問題