Check if background-color is undefined?

Question

In the following situation:

var bgCol = $(selector).css('backgroundColor');

I'm saving the backgroundColor of html elements to a variable. How can I query if bgCol is not set? Various elements on my page do not even have a bgColor so I get errors.

If i check for

if ( bgCol != "rgba(0, 0, 0, 0)" )

everything works fine. I just wonder if this is the right thing to check for? Shouldn't it be something like != "undefined" or != 0

I'm testing for "rgba(0, 0, 0, 0)" because my console told me to... if I console.log(bgCol) and no bgcolor is set my console says: "rgba(0, 0, 0, 0)"

I just wonder if this is right what I'm doing?

Answer 1

While it does depend on the browser, that doesn't mean that you need to fight with browser inconsistencies and try to second-guess whatever strings every browser will return (both now and in the future). Right now, it's 'transparent' in IE and Firefox, and rgba(0, 0, 0, 0) in Webkit browsers, but this may change.

Instead of hard-coding strings and trusting browsers to give you what you expect, you can look up and test against the exact actual name this visitor's browser actually uses for the background-color of a dummy element with background:none;.

// Get this browser's take on no fill. Append, else Chrome returns 'initial'  
var $temp = $('<div style="background:none;display:none;"/>').appendTo('body');
var transparent = $temp.css('backgroundColor');
$temp.remove();

// Use it
if ( $elem.css('backgroundColor') != transparent ) {
  // It's set
} else {
  // It's blank
}

Even if some crazy future browser chooses to use the name "Clive" for the background-color of elements where none has been set (or, more realistically, maybe something based on a schema that better works with the whole sRGB gamut or screen color profiles) this will still work.

Here's an example JSBIN in the context of answering the question How do I detect the inherited background-color of an element using jQuery/JS?

---

Be aware though that some browsers are inconsistent with themselves depending on whether the element is part of the document body or not. So, make sure you compare like with like.

For example, in Chrome:

$('<div/>').css('backgroundColor'); 
// returns '' empty string 

$('<div style="background:none;"/>').css('backgroundColor'); 
// returns 'initial'

$('<div style="background:none;"/>').appendTo('body').css('backgroundColor'); 
// returns 'rgba(0, 0, 0, 0)' 

Answer 2

This depends on the browser - I'd test in for this value in major browsers and find out what you should be testing for. Alternatively, you could check the web to see if this issue has been discussed before.

EDIT: I did alert( $("<div />").css("background-color") ) and it returned "". So I think that is the default in my browser - Chrome.

Answer 3

There is ALWAYS a background color set. If you don't set it, the browser sets it by default. I think it's a fairly right assumption that the default bg is white, as long as we are talking about just body.

In case you are talking about other nodes, what you should try to find out is if the background-color property was fetched from a direct rule or if it was inherited

Answer 4

$(selector[attribute]) returns the set of selectors that match the selector you choose AND that have the attribute listed defined.

using this, you can loop through the DOM elements that you're interested in, checking to see if they have a "background-color" attribute. if they do, great, if not, you can set their background-color attributes to a default of your choice.

Hope this is helpful.

Andy