Comment obtenir l'URL de l'image d'arrière-plan d'un élément en utilisant JavaScript ?

Question

Comment puis-je obtenir le background-image URL d'un <div> en JavaScript ? Par exemple, j'ai ceci :

<div style="background-image:url('http://www.example.com/img.png');">...</div>

Comment puis-je obtenir juste l'URL de la background-image ?

Answer 1

Vous pouvez essayer ceci :

var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Get the image id, style and the url from it
var img = document.getElementById('testdiv'),
  style = img.currentStyle || window.getComputedStyle(img, false),
  bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Display the url to the user
console.log('Image URL: ' + bi);

<div id="testdiv" style="background-image:url('http://placehold.it/200x200');"></div>

Edita:

D'après @Miguel et d'autres commentaires ci-dessous, vous pouvez essayer ceci pour supprimer les guillemets supplémentaires si votre navigateur (IE/FF/Chrome...) les ajoute à l'url :

bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

et s'il peut inclure une citation simple, utilisez : replace(/['"]/g, "")

DEMO FIDDLE

Answer 2

Pour le cas où quelqu'un d'autre aurait une idée similaire, vous pourriez également utiliser Regex :

var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];

Cependant, il semble que la solution de @Praveen soit plus performante dans Safari et Firefox, selon jsPerf : http://jsperf.com/match-vs-slice-and-replace

Si vous voulez tenir compte des cas où la valeur comprend des guillemets mais que vous ne savez pas s'il s'agit d'un guillemet double ou simple, vous pouvez le faire :

var url = backgroundImage.slice(4, -1).replace(/["']/g, "");

Answer 3

Essayez ça :

var url = document.getElementById("divID").style.backgroundImage;
alert(url.substring(4, url.length-1));

Ou, en utilisant replace :

url.replace('url(','').replace(')','');
// Or...
backgroundImage.slice(4, -1).replace(/["']/g, "");

Answer 4

Tout d'abord, vous devez renvoyer le contenu de votre image d'arrière-plan :

var img = $('#your_div_id').css('background-image');

Cela renverra l'URL comme suit :

"url(' http://www.example.com/img.png ')"

Ensuite, vous devez supprimer les parties non désirées de cette URL :

img = img.replace(/(url\(|\)|")/g, '');

Answer 5

const regex = /background-image:url\(["']?([^"']*)["']?\)/gm;
const str = `<div style="background-image:url('http://www.example.com/img.png');">...</div>`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }

    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}