更改DIV背景顏色。點擊（函數（）{

Question

如何更改背景顏色使用jQuery。點擊（函數（）{

DIV正常，綠色，點擊時變爲紅色背景顏色

<div class="stileone"> 
    Div Content 
</div> 

Answer 1

$(".stileone").on("click", function() { 
    $(this).css("background", "red"); 
}) 

DEMO

Answer 2

你需要找到onclick事件到div，然後用

.css("background-color:#00000;); 

Answer 3

與.on()一起使用。當事件'click'發生時，您綁定事件<div.stileone>，然後在$(this)函數中引用您的<div.stileone>對象。並且toggleClass 每次觸發事件時都會添加/刪除類。

的jQuery：

$('.stileone').on('click',function(){ 
    $(this).css('backgroundColor','red'); 
    // OR: if you want to work with a class 
    $(this).toggleClass('redClass'); 
}); 

CSS：

.redClass { 
background-color: red; 
} 

Answer 4

我知道有很多答案在這裏，但我想我會指出，有很多方法可以做到這一點，許多略有不同目的。

基本CSS的僞類是爲了處理這樣的東西但是，他們並不總是跨瀏覽器兼容。對於實例，我不認爲以下在IE> = 8中的作品，但它適用於Chrome和IE9。

div:active { background-color: red; } 

然後，當然基本的點擊CSS變化。這當然會使更改變成儘管，沒有任何其他命令。

$("div").on("click", function() { 
    $(this).css("background-color", "red"); 
}); 
// OR 
$("div").on("click", function() { 
    $(this).css({ backgroundColor: "red" }); 
}); 

正如前面回答顯示，有點擊展開類。在這種情況下，您可以根據您的背景創建一個類，然後根據點擊操作來打開和關閉該類。

$("div").on("click", function() { 
    $(this).toggleClass('back-red'); 
}); 

如果你需要一個jQuery的方式immitate :active，那麼你可以使用鼠標按下/上，而不是簡單的點擊的。這將允許你有效地「跨瀏覽器」模仿CSS的'：active'特性。

$("#div5").on("mousedown", function() { 
    $(this).toggleClass('back-red'); 
}) 
.on("mouseup", function(e) { 
    $(this).toggleClass('back-red'); 
}); 

最後，最後一個功能的方式我現在能想到的是使用目前在最新的破碎方法的jQuery（1.8+），然而，在所有其他jQuery的（1.72-）它似乎工作正常。它被稱爲「切換」方法，通常用於定義一個元素顯示和隱藏。然而，在較早的版本中，它具有備用功能，您可以在其中定義回調並創建自己的動畫。

$("div").toggle(function() { 
    $(this).css("background-color", "red"); 
}, 
function() { 
    $(this).css("background-color", ""); 
}); 

See examples here!