Hi,

I'm currently trying jQuery and I would like to know how can you check the background color of an element.

What I have is a button and a div that when the button is clicked the div changes to a different color but what I want is to change the background color only if the current color is blue, but if the current color is not blue leave it as is? Something like, if background color is blue , change it to red.

In the example below it changes the color to red even though I'm checking for blue, in reality this should leave the color as green since the if statement is false. I know I'm doing it wrong thats why is not doing what I'm trying to accomplish.

Again I'm just practicing and the question is how to determine the current background color of an element and change it based on that using an IF statement.

Thank a lot.

HTML:
HTML Code:
<button id="myButton">Click</button>
<div id="firstDiv">SomeText</div>


CSS:
Code:
#myButton{
    margin-bottom:20px;
}
#firstDiv{
  background-color:green;
    height:250px;
 }
jQuery:

Code:
var myButton = $('#myButton');
var firstDiv = $('#firstDiv');

$('#myButton').click(function(){   
  if(firstDiv.css('background-color', 'blue')){
    firstDiv.css('background-color', 'red');
	}  
});

http://codepen.io/pen/8684/9