访问“背景图像” webkit 浏览器中的 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 徽标效果很好。

对于普通 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)"。