38

part 1onclick div スタイルが変更され、part 2もう一度クリックすると通常に戻ります。私はそうしようとしましたが、part 2結果を達成できませんでした。

以下はJavascriptコードです

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

テスト div をもう一度クリックすると、色がデフォルトの色、つまり黒に戻るはずです...

4

7 に答える 7

55
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";
}
于 2012-04-09T09:28:56.377 に答える
3

jQueryの使用:

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

実例

于 2012-04-09T09:35:49.680 に答える
1

色をチェックしたり、フラグを立てたりするためのロジックがあります。

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";

    }
}
于 2012-04-09T09:30:49.680 に答える
1
function abc() {
    var color = document.getElementById("test").style.color;
    color = (color=="red") ? "black" : "red" ;
    document.getElementById("test").style.color= color;
}
于 2012-04-09T09:35:04.360 に答える
0

クリックして変更する前に、色を確認できます。

function abc(){
     var color = document.getElementById("test").style.color;
     if(color==''){
         //change
     }else{
         //change back
     }
}
于 2012-04-09T09:30:49.493 に答える
0

簡単なswitchステートメントでうまくいくはずです。

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;
}
于 2012-04-09T09:33:28.113 に答える
0

要素のクラスを変更することをお勧めします(.regularは黒、.alertは赤):

function abc(){
  var myDiv = document.getElementById("test");
  if (myDiv.className == 'alert') {
    myDiv.className = 'regular';
  } else {
    myDiv.className = 'alert';
  }
}
于 2012-04-09T09:35:35.280 に答える