Question

I am setting the background-image of some elements using css (some elements have no background image)

.file-type-pdf {
    background-image: url("file-type-pdf.png");
}

I am then trying to determine in javascript whether certain elements have a background image or not, as follows

var style = YAHOO.util.Dom.getStyle(el, 'background-image');
console.log(style);

This works perfectly in FF, where elements with no background image return ‘none’ and elements with a background image return the image url.

However, in chrome and safari, the same code returns an empty string for both cases.

If i were to set a background image in the javascript code as follows, chrome and safari then return the image url ‘foo.jpg’ correctly

YAHOO.util.Dom.setStyle(el, 'background-image', 'url("foo.jpg")');
var style = YAHOO.util.Dom.getStyle(el, 'background-image');
console.log(style);

However, I cannot work out why these browsers cannot access the background-image set through the css

Note also that this syntax (maybe more familiar to some) is producing the same results (empty string in webkit browsers but correct on FF)…

var style = window.getComputedStyle(el, null) || el.currentStyle;
console.log(style.backgroundImage);

Any help would be much appreciated

Answer 1

This works fine for me on the Stack Overflow logo using the Chrome console on this page.

For vanilla JS:

var logo = document.getElementById("hlogo").childNodes[1];
getComputedStyle(logo).getPropertyValue('background-image');

For jQuery:

$("#hlogo a").css("backgroundImage")`

For YUI:

// You have to load YUI first.
var logo = document.getElementById("hlogo").childNodes[1];
YAHOO.util.Dom.getStyle(logo, 'background-image');

All return "url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3)".