Javascript 改變Div樣式

Question

我希望part 1 onclick div 樣式發生變化，而part 2再次單擊它會恢復正常。 我嘗試這樣做，但未能達到第part 2的結果。

以下是Javascript代碼

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

再次單擊測試 div 后，顏色應該恢復為默認顏色，即黑色......

Answer 1

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

Answer 2

使用 jQuery：

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

實例

Answer 3

有一些邏輯來檢查顏色或有一些標志，

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

    }
}

Answer 4

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

Answer 5

您可以在單擊更改顏色之前檢查顏色。

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

Answer 6

一個簡單的 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;
}

Answer 7

最好把元素的 class 改一下（.regular 是黑色，.alert 是紅色）：

function abc(){
  var myDiv = document.getElementById("test");
  if (myDiv.className == 'alert') {
    myDiv.className = 'regular';
  } else {
    myDiv.className = 'alert';
  }
}