为什么这个 jQuery 代码在 Firefox 中不能改变背景颜色？

Question

为什么这个 jQuery 代码在 Firefox 中不能改变背景颜色？

3

我正在努力掌握jQuery，但是这段简单的代码却无法运行。有没有人知道为什么会出现这种情况？

<html>
  <head>

  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("div").live("click", divclicked);
    });

    function divclicked()
    {
      if($(this).css("background-color") == "lightblue")
        $(this).css("background-color", "red");
    }
  </script>

  <style type="text/css">

      div
      {
         background-color: lightblue;
      }

  </style>

  </head>
  <body>
    <div id="testdiv">
      this is a test
    </div>
  </body>
</html>

感谢您提供的任何意见。

更新：当样式是内联时，使用“backgroundColor”而不是“background-color”的解决方案有效，如果您使用样式表，则无效。

I have updated the example to use a stylesheet.

- Sirpingalot

2个回答

1

上面的答案可能非常准确

为了避免混淆js和css之间语法的差异，我倾向于使用JSON语法在jquery中更改CSS

$(this).css({'background-color':'red', height:'200px'});

然后你只需要记住两个基本规则，它们总是有效的：用逗号代替冒号，并在任何连字符属性名称周围加上引号。

- wheresrhys

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shog9 · Accepted Answer

尝试在您的脚本中将 background-color 更改为 backgroundColor：

if($(this).css("backgroundColor") == "lightblue")
  $(this).css("backgroundColor", "red");

DOM倾向于避免使用破折号命名，因为它们不是有效的JavaScript标识符。

啊！Paolo在我正在给他的回答写评论时删除了他的回答……我没有意识到将"background-color"传递给.css()会做任何有用的事情，更不用说返回实际的RGB值了！在你的情况下，效果是一样的（因为你的逻辑需要保留原始值），但仍然值得注意以备将来参考。

另外：如果你使用CSS类而不是依赖于能够直接读取和写入样式，你会更容易 - jQuery非常好地与CSS类配合，提供了方便的方法来检查、切换和修改它们。