Question

我正在尝试根据当前颜色更改元素的背景。

这是相关的html：

<div id="rect" style="height: 100px; width:300px; background: red">
</div>

和我的jquery尝试：

    $("#rect").click(function() {
    if ($(this).css('background') == 'red') {
        $(this).css('background','blue');}
    else {$(this).css('background','yellow');}
    });

我总是得到一个黄色的盒子; “真正的”条件永远不会发生。

我做错了什么？

Answer 1

<强>更新

我在IE中发现了一个例外，正如预期的那样。要考虑IE异常，只需使用jQuery的.browser方法。我已将此添加到示例代码中。

尝试：

$("#rect").click(function() {
    var red = $.browser.msie ? "red" : "rgb(255, 0, 0)";
    if ($(this).css('background-color') == red) {
        $(this).css('background','blue');}
    else {$(this).css('background','yellow');}
});

正如我在评论中解释的那样，jQuery分解了CSS属性“background”的每个部分，因此您需要调用所需的确切属性，在本例中为background-color。此外，jQuery将颜色值返回为RGB样式，因此红色将为rgb(255, 0, 0)。现在这不会阻止.css("background"对 SET 背景有用，只记得，就像css一样， background 会覆盖所有其他背景直接属性。< / p>

显然有人为我做了一个jsFiddle示例。（谢谢你Sushanth）

See it Here

同样@RyanKinal在他的评论中提出了一个很好的观点“jQuery甚至可能无法将颜色标准化为特定格式，因此不同的浏览器可能会返回不同格式的颜色。这是需要注意的事项。” ~~我没有测试过~~ ...

通过不同浏览器返回的CSS“red”：

Firefox 17：“rgb（255,0,0）”
Chrome 24：“rgb（255,0,0）”
Opera 12：“rgb（255,0,0）”
Safari 5：“rgb（255,0,0）”
IE 7-9：“red”

jquery初学者：点击后更改背景

1 个答案:

See it Here