JQuery不识别#FFFFFF的背景颜色

我试图建立一个快速的东西，每当你点击一个按钮，网页就会改变颜色。我写了JS，如果当前bg是#FFFFFF，它会将bg颜色更改为红色。在它没有使用默认设置后，我尝试通过CSS和HTML脚本标记将bg颜色明确设置为#FFFFFF。都没有工作。奇怪的是，如果我将==运算符更改为！==，JS会运行。JQuery不识别#FFFFFF的背景颜色

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

 
     }; 
 
     }); 
 
    });

body { 
 
    background-color: #FFFFFF; 
 
}

<!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>

来源

2017-02-13 jylny

您正在检查正文上的背景颜色属性。 Body没有背景颜色属性。它有一个style属性 - 它又有一个background-color属性。

选项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"); 
}

来源

2017-02-13 23:57:20 BrasilianEngineer

非常感谢！我正要放弃这一点。也从答案中学到了很多东西！ – jylny

很高兴我能帮到你。 – BrasilianEngineer

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

来源

2017-02-13 23:37:44 laser

不能使用attr检索的样式属性，你必须css代替：
$("body").css("background-color")

更多的信息在这里：https://api.jquery.com/css/

来源

2017-02-13 23:37:50 nicolast

加入同一时刻=） – laser

我代替attr的情况下，用CSS，它仍然没有运行，尽管！==更换还是奇怪的作品。任何其他想法？ – jylny

您可以在点击处理程序的开始处添加一个'console.log（$（“body”）.css（“background-color”））'并打开控制台以查看正在发生的事情。 – nicolast

试试这个：

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

来源

2017-02-13 23:40:56

JQuery不识别#FFFFFF的背景颜色

回答

相关问题