Determine if a background element is set?

Question

I am trying to determine if an element is set explicitly. I decided that I could just check if .css('background') * is installed, however it is not compatible between browsers. For example, chrome shows an element without a background set as

 background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box background-color: rgba(0, 0, 0, 0) background-image: none 

whereas IE8 shows

 background: undefined background-color: transparent background-image: none 

(test case here )

* (shorthand CSS properties are not supported for getting display styles in jQuery)

With the exception of handling each case, is there a better way to detect this?

Answer 1

temporary elemental approach

This is not ideal, but you can create a temporary element when your js initiates, insert it somewhere in the document hidden (because if you do not get empty styles for webkit browsers), and then read the default background style set for this element. This will give you your base values. Then, when you compare your real element, if they are different, you know that the background is set. Obviously, the disadvantage of this method is that it cannot determine if you are setting the background to the base state.

 var baseline = $('<div />').hide().appendTo('body').css('background'); var isBackgroundSet = ( element.css('background') != baseline ); 

If you want to avoid possible global element styles, this will break the ie system:

 div { background: red; } 

... you could use the following instead, but I doubt that it will work so well with older browsers:

 var baseline = $('<fake />').hide().appendTo('body').css('background'); 

background

I spent some time on a similar problem - trying to get the original width value from the element when setting in percent. Which was much more complicated than I expected, in the end I used a similar temporary solution to the element. I also expected that, as Rene Koch does above, the getComputedStyle method will work ... it's actually annoying. Trying to spot the difference between the original CSS world and the runtime of the CSS world is a difficult task.

Answer 2

This should work:

 function isBGDefined(ele){ var img = $(ele).css('backgroundImage'), col = $(ele).css('backgroundColor'); return img != 'none' || (col != 'rgba(0, 0, 0, 0)' && col != 'transparent'); }; 

Demo

I did not test the background property, because in the end it will change the computed styles as backgroundImage and / or backgroundColor .

Here the code runs against your test case (with another one added): http://jsfiddle.net/WG9MC/4/

Answer 3

This article explains how: http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

 function getStyle(oElm, strCssRule){ var strValue = ""; if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); } else if(oElm.currentStyle){ strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; } return strValue; } 

Answer 4

Using the approach suggested by @pebbl, I wrote a small jQuery function, hasBack() , to determine if an element is set in the background.

 $.fn.hasBack = function() { var me = $.fn.hasBack; if(!me.cache) { // get the background color and image transparent/none values // create a temporary element var $tmpElem = $('<div />').hide().appendTo('body'); $.fn.hasBack.cache = { color: $tmpElem.css('background-color'), image: $tmpElem.css('background-image') }; $tmpElem.remove(); } var elem = this.eq(0); return !(elem.css('background-color') === me.cache.color && elem.css('background-image') === me.cache.image); } 

This has been tested in versions of Chrome v22, Firefox v15, Opera 12.1, IE9, IE9 installed in browser modes 9 compat, 9, 8, 7 and quirks mode.

Test case here .