Accès « background-image » propriété CSS dans les navigateurs WebKit

Question

Je suis en train de l'arrière-plan image de certains éléments en utilisant css (certains éléments ont pas d'image d'arrière-plan)

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

Je puis essaie de déterminer en javascript si certains éléments ont une image d'arrière-plan ou non, comme suit

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

Cela fonctionne parfaitement dans FF, où les éléments sans image de fond retour « none » et des éléments avec une image de fond renvoient l'URL de l'image. Toutefois, en chrome et safari, le même code renvoie une chaîne vide pour les deux cas.

Si je devais définir une image d'arrière-plan dans le code javascript comme suit, chrome et safari puis retour l'URL de l'image « foo.jpg » correctement

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

Cependant, je ne peux pas comprendre pourquoi ces navigateurs ne peuvent pas accéder à l'arrière-plan-image définie par le code CSS

Notez également que cette syntaxe (peut-être plus familier à certains) produit les mêmes résultats (chaîne vide dans les navigateurs WebKit mais correct sur FF) ...

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

Toute aide serait très appréciée

Answer 1

Cela fonctionne très bien pour moi sur le logo Stack Overflow en utilisant la console Chrome sur cette page.

JS vanille:

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

Pour jQuery:

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

Pour YUI:

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

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