1

how to get the the value of background-color property 

if ($(this).css('background-color') == 'InfoBackground') 
{
     // it doesn't enter here
}
Ahmed Mohsen
  • 114
  • 2
  • 9
  • 1
    background-color expects a color code. You maybe want to check for the class: `$(this).hasClass('InfoBackground')`. – Paul Sep 27 '14 at 15:32
  • 2
    _Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255)._ – Ram Sep 27 '14 at 15:32
  • http://stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of-an-element – bhavya_w Sep 27 '14 at 15:32
  • First: background-color should be a color. Second: Whats the code above? – Bernd Sep 27 '14 at 15:32
  • Perhaps, InfoBackground is a variable? Then, use it without quote. – Bhojendra Rauniyar Sep 27 '14 at 15:33
  • @Bernd InfoBackground is a right color name and the code is clear ! – Ahmed Mohsen Sep 27 '14 at 15:36
  • @Bernd: `InfoBackground` is a [CSS 2 System Color](http://www.w3.org/TR/css3-color/#css2-system). – David Thomas Sep 27 '14 at 15:43

2 Answers2

0

background color outputs are rgb() in jQuery as far as I know, so I don't think if there's a convenient way of comparing it!

take a look at THIS example,

alert($('#color').css('background-color'));
if($('#color').css('background-color')=='red'){
    alert('first if');
}

it will not enter the first if because $('#color').css('background-color') equals rgb(255,0,0) and it doesn't match red so it wont get inside the if condition.

what you can do, is to give the desired DOM a class, and check if the element has the class, like this:

if($('#color').hasClass('red')){
    alert('second if');
}

which will fire the alert inside of it.

Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
  • I understood , but what about this ? if ($(this).css('background-color') == 'rgb(251,252,197)') { // it should enter now , right ? } – Ahmed Mohsen Sep 27 '14 at 15:46
  • it will not, because you need to put a space after each semi-column like this `if ($(this).css('background-color') == 'rgb(251, 252, 197)') { }`, now it will enter, but as I said above, it is not convenient, which means it's not a good idea to do it, because the output may differ in different browsers, the best and most common way is to use a class which I mentioned above. – Amin Jafari Sep 27 '14 at 15:54
-1

You'll want to check against the RGB value of whatever InfoBackground is.

Notice the following returns rgb(251, 252, 197)

if ($("#myElement").css('background-color') == 'rgb(251, 252, 197)') {
     alert('hello');
}
#myElement { background-color: InfoBackground; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="myElement">Hi</div>

However, this seems like kind of a fickle approach. Different browsers might behave differently or implement InfoBackground differently. It would be better to assign a class, property, or data-attribute and then use that to dictate the color.

KyleMit
  • 30,350
  • 66
  • 462
  • 664