jQuery if/else statement CSS

Question

I have an interesting problem that I don't understand. It's a simple jQuery if else statement, but it's not working. Why is it not working?

Code:

$("#div").click(function(){

    if ( $("#div2").css("background-image") === "url(img/image.png)") {
        alert('OK');
    }
    else {
        alert('NG');
    }

});

But when I change .css("background-image") === "url(img/image.png)", for example, to .css('position') === 'absolute', it's working.

What happens if you alert (or write/log/inspect) $("#div2").css("background-image"). — GolezTrol
– GolezTrol, Commented Mar 15, 2012 at 19:45
Can you post a snippet of the html you're checking and maybe the corresponding css? — sinemetu1
– sinemetu1, Commented Mar 15, 2012 at 19:46
thats weird, why would .css('height') === 'absolute' ever work? — Zach Lysobey
– Zach Lysobey, Commented Mar 15, 2012 at 19:47
oh, sorry its .css('position') === 'absolute' not .css('height') === 'absolute'. — nmsdvid
– nmsdvid, Commented Mar 15, 2012 at 19:57

Peter Mortensen · Accepted Answer · 2013-04-17 18:45:04Z

4

There could be a subtle difference in the value; alert the value in the else statement to see what's going on. For example,

if ( $("#div2").css("background-image") === "url(img/image.png)") {
    alert('OK');
}
else {
    alert($("#div2").css("background-image"));
}

edited Apr 17, 2013 at 18:45

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 15, 2012 at 19:44

Karl Rosaen

4,6322 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

steveax Over a year ago

Yup, the background-image url gets a fully qualified path. Fiddle: jsfiddle.net/TKUET

Daniel Lorenz · Accepted Answer · 2012-03-15 20:28:56Z

2

My guess would be that when the css loads, it is taking url(img/image.png) and turing that into http://www.somehost.com/img/image.png. Thus, .css("background-image") would no longer equal "url(img/image.png)".

Instead of checking

.css('background-image') == 'url(img/Image.png)'

check

.css('background-image').indexOf("img/Image.png") != -1

edited Mar 15, 2012 at 20:28

answered Mar 15, 2012 at 19:47

Daniel Lorenz

4,3461 gold badge35 silver badges40 bronze badges

Comments

Brandon Kindred · Accepted Answer · 2012-03-15 19:50:48Z

0

Just shooting in the dark here, but "url(img/image.png)" should probably have single quotes around the argument to url() since that's the way the syntax goes for the CSS.

"url('img/image.png')"

answered Mar 15, 2012 at 19:50

Brandon Kindred

1,49814 silver badges21 bronze badges

3 Comments

steveax Over a year ago

Quoting the path is optional and both single and double quotes are fine.

Steve Over a year ago

Sure, both are fine when declaring the path in the stylesheet. The question here, however, is: What does $("#div2").css("background-image") return? A string with or without the single quotes. This might be a browser dependent answer, so doing an indexOf, as Daniel suggests above, might be the safest way to go.

steveax Over a year ago

In Firefox at least, the full path is returned and enclosed in double quotes: url("http://thesite.tld/path/to/image.png") (see my fiddle above)

nmsdvid · Accepted Answer · 2012-03-16 08:17:14Z

0

It appears that the right answer is to write the full path to the image. So, use url(http://www.myhost.com/img/image.png) instead of url(img/image.png) .

answered Mar 16, 2012 at 8:17

nmsdvid

2,9082 gold badges23 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery if/else statement CSS

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related