Puis-je obtenir l'URL de l'image de fond de div?

Question

J'ai un bouton dont je veux alerter l'URL de l'image de fond de #div1 lorsque je le clique dessus.

C'est possible?

Answer 1

Je préfère généralement .replace() aux expressions régulières lorsque c'est possible, car il est souvent plus facile à lire: http://jsfiddle.net/mblase75/z2jKA/2

     $("div").click(function() {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','');
        alert(bg);
    });
 

Answer 2

Oui c'est possible:

 $("#id-of-button").click(function() {
    var bg_url = $('#div1').css('background-image');
    // ^ Either "none" or url("...urlhere..")
    bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url);
    bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
    alert(bg_url);
});
 

Answer 3

J'ai légèrement amélioré la réponse, qui gère les définitions CSS étendues comme:

 background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136))
 

Code JavaScript:

 var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
 

Résultat:

 "http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
 

Answer 4

Comme mentionné précédemment, la solution Blazemongers ne parvient pas à supprimer les guillemets (par exemple, renvoyés par Firefox). Depuis que je trouve la solution de Rob W assez compliquée, ajouter mes 2 centimes ici:

 $('#div1').click (function(){
  url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
  alert(url);
})