jQuery check if .css property was set

Question

My code looks like this

if($(element).css("background-color") == null){
  $(element).css("background-color", "white");
}

I want to make sure that if the color wasn't set in the style.css file, I add it. But that code is not working. It's always returning rgba(0,0,0,0). The browser I am working with is Chrome.

Is there another way to check if the color wasn't set?

Do your logic with classes and the styling in CSS. Then you can check if the class exists with hasClass. — elclanrs
– elclanrs, Commented Aug 24, 2013 at 0:25

vol7ron · Accepted Answer · 2015-06-16 17:22:36Z

7

CSS:

.background-set { background-color: white; }

jQuery:

var $el = $(element);

if( !$el.hasClass('background-set') ){
   $el.addClass('background-set');
}

Though I'm not sure why you'd need to check. You can just add it without the condition.

Alternatively:

if ( $el.prop('style').backgroundColor == '' ) {
   ... 
}

or

if ( $el.get(0).style.backgroundColor == '' ) {
   ...
}

edited Jun 16, 2015 at 17:22

answered Aug 24, 2013 at 0:50

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

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

Comments

oddurad · Accepted Answer · 2013-08-24 00:41:13Z

1

The method suggested by elclanrs is the most elegant way of handling this and should be the preferred method. However, for the sake of sating curiosity, you could achieve the same result using a jQuery Attribute Contains Selector.

$("div[style*='background-color']").text("I have a background color!");

jsFiddle demo

answered Aug 24, 2013 at 0:41

oddurad

4171 gold badge4 silver badges14 bronze badges

3 Comments

MackieeE Over a year ago

Whilst this is good, but it only checks for in-line styling I think?

oddurad Over a year ago

You're right, which is yet another reason why you shouldn't really do this when you have other options. stackoverflow.com/a/2239605/1351133 is a better/more thorough solution to this than what I posted.

MackieeE Over a year ago

Good link there, very relevant to the OP's requirements =) (Even if the class route is undoubtedly the best method!)

Collectives™ on Stack Overflow

jQuery check if .css property was set

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related