CSS-property 'background' not working in 'if.. else'

Question

I can not make CSS-property 'background' work when using it in an 'if.. else' - statement. I tried all possible combinations of 'background-color' and backgroundColor' in both CSS and JQuery, but nothing is working.

The funny thing is that when exchanging the 'if..' with another property fx ('width') == '500px' everything is working fine.

Are there any special thing i should know when using 'background'? Heres the code that doesn't work - the div turns yellow when clicking even thought it should become pink..

.box {  
    width: 500px;
    height: 200px;
    background: red;
}

<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
$(document).ready(function() {      
    $('.box').click(function(){
        if ($('.box').css('background') == 'red') {
            $('.box').css('background', 'pink'); 
        }  
        else {  
            $('.box').css('background', 'yellow');
        } 
    });
});
</script>

ANSWER - this is the original answer from showdev, which i think reflects my question better - could be a help to future visitors:

  $('.box').click(function() {
    if ($(this).css('background-color') == 'rgb(255, 0, 0)') {
      $(this).css('background-color', 'pink');
    } else {
      $(this).css('background-color', 'yellow');
    }
  });

A simple debug statement will show you the problem: `console.log($('.box').css('background'));` — epascarello, Oct 21 '14 at 20:12
It's very likely that your css is being overridden by a more specific style. Can you look in the inspector and see what's going on and whether some other style is taking precedence? — trnelson, Oct 21 '14 at 20:13
As epascarello mentions, `$('.box').css('background')` returns an empty string, you need to check against the property `background-color` — entropic, Oct 21 '14 at 20:18

score 1 · Accepted Answer · edited May 23 '17 at 12:20

The CSS background is shorthand for several individual background properties including background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

As a result, the value of background is returned as something like rgb(255, 192, 203) none repeat scroll 0% 0% / auto padding-box border-box.

You can use background-color instead, but jQuery returns background-color values in RGB rather than HEX. So you'll need to match RGB values rather than HEX or words ("red").

Also, I changed references inside your click handler to use $(this) rather than selecting the box again. This allows more flexibility when multiple boxes are on the page.

$(document).ready(function() {
  $('.box').click(function() {
    $this = $(this);
    $this.css('background-color',
        $this.css('background-color') == 'rgb(255, 0, 0)' ? 'pink' : 'yellow');
  });
});

.box {
  width: 500px;
  height: 50px;
  background-color: red;
}
.box.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box blue"></div>

Regarding CSS colors as RGB:

"Computed Value: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one." -Color - CSS | MDN
Can I force backgroundColor [to return in] hexadecimal format?

Thx for the excellent explanation! Confusing JQuery using only RGB in this case - but at least now i know why.. Sorry i cant vote your answer - i need points. — user3880297, Oct 21 '14 at 20:26

CSS-property 'background' not working in 'if.. else'

1 Answers1