Question

我正试图抓住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.

Answer 1

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

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

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

哎呀！ Paolo在我输入评论时删掉了他的答案......我没有意识到将“background-color”传递给.css()会使任何有用，更不用说返回了实际的RGB值！在您的情况下，效果是相同的（因为您的逻辑需要保留原始值），但仍值得注意以供将来参考。

另外：如果您使用CSS类而不是依赖于能够直接读取和编写样式，那么您将有更轻松的时间 - jQuery可以很好地使用CSS类，为check提供了简便的方法，toggle和modify他们。

Answer 2

上面的答案可能就在

上

为了避免对js中的语法差异感到困惑，与css相比，我倾向于使用JSON语法在jquery中更改CSS

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

然后你需要记住的是两个始终有效的基本规则：逗号而不是冒号，并在任何带连字符的属性名称周围加上引号。

为什么这个jQuery代码无法改变Firefox中的背景颜色？

2 个答案: