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的背景顏色

回答

相關問題