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

【问题标题】：Why is this jQuery code not working to alter background-color in Firefox?为什么这个 jQuery 代码不能改变 Firefox 中的背景颜色？
【发布时间】：2023-03-05 00:39:01
【问题描述】：

我正在尝试掌握 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.

【问题讨论】：

标签： jquery css firefox

【解决方案1】：

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

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

DOM 倾向于避免使用虚线名称，因为它们不是有效的 JavaScript 标识符。

啊！ Paolo 在我输入评论时删除了他的答案...我没有意识到将“背景颜色”传递给 .css() 会做任何事情有用，更不用说返回实际的 RGB价值！在您的情况下，效果是相同的（因为您的逻辑需要完全保留原始值），但仍然值得注意以供将来参考。

另外：如果你使用 CSS 类而不是依赖于能够直接读取和编写样式，你将有一个更轻松的时间 - jQuery 与 CSS 类很好地配合，为check，@ 提供了简单的方法987654322@和modify他们。

【讨论】：

如果背景颜色样式是内联的，则此方法有效。但是，如果将背景颜色样式放在样式表中，则不起作用。
如果它在样式表中，您会被计算样式（ rgb(173, 216, 230) ）困住。最好改用类名。
正确。 .css 仅适用于内联样式。如果要使用样式表，则需要检查应用的类，如上所述。
很抱歉删除了答案，只是想你的东西已经涵盖了。 :)
是的，我不断得到以 rgb 数字计算的样式。我想我被类名困住了。

【解决方案2】：

上面的答案很可能是正确的

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

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

那么您只需要记住 2 条始终有效的基本规则：逗号而不是冒号，并在任何带连字符的属性名称周围加上引号。

【讨论】：