Question

我试图建立一个快速的东西，每次单击按钮时网页都会改变颜色。我写了JS，如果当前的bg是#FFFFFF，它会将bg颜色改为红色。在它没有使用默认值后，我尝试通过CSS和HTML脚本标记显式设置bg颜色为#FFFFFF。都没有奏效。奇怪的是，如果我将==运算符更改为！==。

，则运行JS

＆＃13;

    $(document).ready(function() {
      $("button").click(function() {
        if ($("body").attr("background-color") == "#FFFFFF") {
          $("body").css("background-color", "red");
        } else if ($("body").attr("background-color") == "red") {

        };
      });
    });

＆＃13;

body {
  background-color: #FFFFFF;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title></title>
</head>

<body style="background-color:#FFFFFF;">
  <button>hi</button>
  <div class="test">text</div>
</body>

</html>

＆＃13;

Answer 1

您无法使用attr来检索样式属性，而是必须css代替：{ $("body").css("background-color")

此处有更多信息：https://api.jquery.com/css/

Answer 2

不是属性，是检查的样式。属性在标签内部，样式在css内部。使用$("body").css("background-color")

Answer 3

您正在检查身体上的背景颜色属性。身体没有背景颜色属性。它有一个样式属性 - 它又具有背景颜色属性。

选项1：更改if语句以检查样式：

if ($("body").attr("style") == "background-color: #FFFFFF;")

只有在您不添加其他样式时才会有效。你最好使用下面的选项2.

选项2：通过css类设置颜色，然后检查主体是否具有该类。

CSS:
.white { background-color: #FFFFFF; }
.red { background-color: red; }

JQUERY:
if ($("body").hasClass("white")) {
    $("body").removeClass("white").addClass("red");
}

Answer 4

试试这个：

   $("body").css("background-color", "#FFFFFF");

JQuery没有识别#FFFFFF的背景颜色

4 个答案: