访问“背景图片” CSS属性

我使用的CSS（一些元素没有背景图片）设置一些元素的背景图像访问“背景图片” 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，在没有背景图像回“无”和元素与背景图像元素返回图像的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);

任何帮助将不胜感激

来源

2011-06-13 seh

如果你想跨浏览器兼容，我建议你看看http://nb.io/hacks/csshttprequest。它使用该属性使用data：// URI方案传输数据。 – Tom 2011-06-13 01:09:36

这适用于我使用此页上的Chrome控制台堆栈溢出标志。

对于香草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)"。

来源

2011-06-13 01:06:06 brymck

感谢您的回复。仔细检查后，问题似乎与正在传递给特定函数的元素节点相关联，就好像我在函数中通过id获得相同的元素，上面的代码工作正常。 - 尽管这个问题只是在webkit浏览器中出现，但还是很奇怪。我实际上已经想出了一个更好的解决方案来解决我的问题，而不是检查元素是否有bg图像 - 所以我想这可能只是一个谜 – seh 2011-06-13 05:22:36

访问“背景图片” CSS属性

回答

相关问题