2

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

这是相关的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');}
    });

我总是得到一个黄色的盒子；'true' 条件永远不会触发。

我究竟做错了什么？

4

1 回答 1

3

更新

正如预期的那样，我在 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-color。此外，jQuery 以 RGB 样式返回颜色值，因此红色为rgb(255, 0, 0). 现在这并没有停止.css("background"对SET背景有用，请记住，就像 css 一样，背景将覆盖所有其他背景直接属性。

显然有人为我做了一个 jsFiddle 的例子。（谢谢苏珊斯）

看这里

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

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

  • Firefox 17：“rgb(255, 0, 0)”
  • Chrome 24：“rgb(255, 0, 0)”
  • 歌剧 12：“rgb(255, 0, 0)”
  • Safari 5：“rgb(255, 0, 0)”
  • IE 7-9：“红色”
于 2012-12-03T16:59:54.767 回答