在webkit浏览器中访问“background-image”css属性

Question

我正在使用css设置某些元素的背景图像（某些元素没有背景图像）

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

然后我尝试在javascript中确定某些元素是否具有背景图像，如下所示

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

这在FF中非常有效，其中没有背景图像的元素返回'none'，带有背景图像的元素返回图像URL。

但是，在chrome和safari中，相同的代码会为两种情况返回一个空字符串。

如果我要在javascript代码中设置背景图片，如下所示，chrome和safari然后正确返回图片url'foo.jpg'

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

但是，我无法弄清楚为什么这些浏览器无法通过css访问背景图像集

另请注意，这种语法（可能对某些人来说比较熟悉）会产生相同的结果（webkit浏览器中的空字符串，但在FF上是正确的）...

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

非常感谢任何帮助

Answer 1

使用此页面上的Chrome控制台，我可以在Stack Overflow徽标上使用此功能。

对于vanilla JS：

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

对于jQuery：

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

对于YUI：

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

全部返回"url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3)"。