Javascript更改Div風格

我想要part 1 onclick div風格變化和part 2再次點擊它恢復正常。我試圖這樣做，但我未能實現part 2結果。Javascript更改Div風格

以下是Javascript代碼

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

再次單擊測試DIV後，顏色應回過頭來defaulr顏色即黑色...

來源

2012-04-09 Sandbox E

安置自己的事件在你的if語句綁定代碼 – 2012-04-09 09:29:39

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-09 09:28:56

，爲什麼不'顏色= 「黑」'和'顏色= 「紅色」'。你已經拿着顏色 – 2013-03-04 01:25:03

@AbdullahGheith'color'就是變量的*名稱*。我可以將它命名爲「bob」或任何我想要的東西。我把顏色存儲在'color'中。 – 2013-03-04 10:10:47

我的意思是在if和line之後的其他行 – 2013-03-10 08:59:14

您可以檢查顏色點擊之前改變它。

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

來源

2012-04-09 09:30:49 lioncin

有一些邏輯檢查的顏色還是有一定的標誌，

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-09 09:30:49

這可能不適用於所有瀏覽器 – 2012-04-09 09:32:09

一個簡單的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-09 09:33:28 faino

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

來源

2012-04-09 09:35:04 apnerve

更好的改變之類的元素（.regular爲黑色，.alert爲紅色）：

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

來源

2012-04-09 09:35:35 Vlad

使用jQuery：

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

Live example

來源

2012-04-09 09:35:49 jacktheripper

很好的例子！簡單而酷！ :) – 2014-09-10 15:29:19

Javascript更改Div風格

回答

相關問題