訪問「背景圖片」 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屬性

回答

相關問題