See examples here!

Question

如何使用jQuery更改背景颜色.click（function（）{

使用绿色的div normal，单击时更改为红色背景颜色

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

Answer 1

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

DEMO

Answer 2

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

基本CSS Psuedo类是为了处理这样的东西，但是，它们并不总是跨浏览器兼容。对于Instance，我不认为以下工作在IE＆gt; = 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", "");
});

See examples here!

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

使用.click更改DIV背景颜色（function（）{

4 个答案:

See examples here!