jquery - 使用 .click(function(){ 更改 DIV 背景颜色

Question

如何使用 jQuery 更改背景颜色 .click(function(){

div 正常，绿色，点击后变为红色背景色

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

Answer 1

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

演示

Answer 2

我知道这里有很多答案，但我想我会指出，有很多方法可以做到这一点，而且许多方法的目的略有不同。

基本的 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 方式来模仿:active，那么你可以使用 mousedown/up 而不是简单的单击。这将允许你有效地“跨浏览器”模仿 CSS 的 ':active' 特性。

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

最后，我现在能想到的最后一个功能方法是使用目前在 NEWEST jQuery (1.8+) 中被破坏的方法，但是，在所有其他 jQuery (1.72-) 中它似乎工作正常。它被称为“切换”方法，通常用于定义一个元素的显示和隐藏。但是在旧版本中，它有一个替代功能，您可以在其中定义回调，从而创建自己的动画。

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

在此处查看示例！

Answer 3

与.on(). 您<div.stileone>在事件'click'发生时绑定一个事件，然后<div.stileone>在函数中使用$(this). 每次触发事件时，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

您需要找到 div 的 onclick 事件，然后使用

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