jQuery if / else语句不起作用

Question

Very new to jQuery, and I can't figure out why this little snippet of code isn't working. I set the background of the body to black, but I always return with the else statement, and my background turns orange instead of the desired pink.

$(document).ready(function(){
    $("body").css("background","black");
        if ($("body").css("background") == "black") {
            $("body").css("background", "pink");
        }
        else {
            $("body").css("background", "orange");
        }
});

You can see what's happening here: http://jsfiddle.net/jH6Y9/1/

Answer 1

You can't just ask for a composite CSS style like "background"; the value comes back as the empty string. Ask for "background-color". ( edit — Firefox gives me the empty string; other browsers might construct the whole composite set of background properties for you.)

Now, once you get past that problem, you'll discover that the reported color won't be "black". It'll be some other color syntax that means "black".

Instead of relying on the style mechanism to keep track of what's going on, use a class instead:

$("body").addClass("black");
if ($("body").hasClass("black"))
  $("body").addClass("pink");
else
  $("body").addClass("orange");

Then in your CSS:

body.black { background-color: black; }
body.pink { background-color: pink; }
body.orange { background-color: orange; }

Better yet, use some semantically meaningful name for the state of the page instead of the color names, so that if you later change your mind and want to have the background switch from a dog to a kitten the code will still make sense.

Answer 2

css 'background' gives you the full background param, it would look something like:

"rgb(0,0,0) none repeat scroll..."

If you just want to check the color, you need to specify that you want the color attribute, and also test it against the value that it actually uses, instead of "black" you actually want to test the rgb color value:

if ($('body').css("background-color") == "rgb(0, 0, 0)")

Answer 3

The fix is simple. $("body").css("background-color", "black") !== "black" . Instead, it equals rgb(0, 0, 0) . In CSS, "black" is not a real color. Instead, it gets converted to an rgb() color. To fix it:

$(document).ready(function(){
    $("body").css("background-color","black");
    console.log($("body").css("background-color"))
    if ($("body").css("background-color") == "rgb(0, 0, 0)") {
        $("body").css("background-color", "pink");
    }
    else {
        $("body").css("background-color", "orange");
    }
});

fiddle