JQueryが#FFFFFFの背景色を認識していません

ボタンをクリックするたびにWebページの色が変わる場所を素早く構築しようとしています。私は現在のbgが#FFFFFFならbgの色を赤に変えるJSを書いた。デフォルトではうまくいきませんでしたが、CSSとHTML scriptタグを使って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

本文の背景色の属性を確認しています。本文に背景色の属性がありません。それはスタイル属性を持っています。これは背景色属性を持っています。

オプション1：あなたは追加のスタイルを追加していない場合にのみ動作します

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

は、私はCSSでのattrのインスタンスを置き換えると！==交換まだ妙に動作しても、それはまだ、実行されていない）= – laser

を同じ瞬間を追加しました。他のアイデア？ – jylny

あなたのクリックハンドラの最初に 'console.log（$ body（" body "）.css（" background-color "））'を追加し、コンソールを開いて何が起こっているかを見ることができます。 – nicolast

はこれを試してみてください。

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

出典

2017-02-13 23:40:56

JQueryが#FFFFFFの背景色を認識していません

答えて

関連する問題