Wie erhalte ich die Hintergrundbild-URL eines Elements mit JavaScript?

74

Wie würde ich die background-imageURL eines <div>Elements in JavaScript erhalten? Zum Beispiel habe ich Folgendes:

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

Wie würde ich nur die URL von bekommen background-image?

javascript css celliott1997
quelle

Antworten:

93

Sie können dies versuchen:

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

Code-Snippet anzeigen

Bearbeiten:

Basierend auf @Miguel und anderen Kommentaren unten können Sie versuchen, zusätzliche Anführungszeichen zu entfernen, wenn Ihr Browser (IE / FF / Chrome ...) diese zur URL hinzufügt:

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

und wenn es ein einfaches Anführungszeichen enthalten kann, verwenden Sie: replace(/['"]/g, "")

DEMO FIDDLE

palaSн
quelle
3
Leider funktioniert dies im IE nicht, da die zurückgegebene Zeichenfolge in Anführungszeichen steht. Also endete ich mit folgendem: bi = style.backgroundImage.slice(4, -1).replace(/"/g, ""); Und jetzt funktioniert es :)
Miguel Garrido
1
Firefox zitiert auch die Zeichenfolgen. Zumindest ab FF39.
Will
1
style.backgroundImage.slice(5, -2)funktioniert natürlich auch.
Mark Hewitt
Scheibe?? Ich fühle mich wie ein mittelalterlicher Bauer
Toolkit
20

Um dies zu ergänzen, falls jemand eine ähnliche Idee hat, können Sie auch Regex verwenden:

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

Laut jsPerf: http://jsperf.com/match-vs-slice-and-replace scheint die Lösung von @ Praveen in Safari und Firefox tatsächlich eine bessere Leistung zu erzielen

Wenn Sie Fälle berücksichtigen möchten, in denen der Wert Anführungszeichen enthält, sich jedoch nicht sicher sind, ob es sich um ein doppeltes oder ein einfaches Anführungszeichen handelt, können Sie Folgendes tun:

var url = backgroundImage.slice(4, -1).replace(/["']/g, "");
Säger
quelle
1
Dies ist die vollständige Antwort
Mladen Janjetovic
1
Das |ist in Ihrer Regex nicht erforderlich, das [...]bedeutet, dass Zeichen darin enthalten sind. replace(/["']/g, "")ist in
Ordnung
8

Zunächst müssen Sie Ihren Hintergrundbildinhalt zurückgeben:

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

Dadurch wird die URL wie folgt zurückgegeben:

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

Dann müssen Sie die unerwünschten Teile dieser URL entfernen:

img = img.replace(/(url\(|\)|")/g, '');
Alanoud Just
quelle
8

Versuche dies:

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

Oder mit replace:

url.replace('url(','').replace(')','');
// Or...
backgroundImage.slice(4, -1).replace(/["']/g, "");
Praveen Kumar Purushothaman
quelle
1
Dieser Teilstring entfernt nur die url(. Die Anführungszeichen werden nicht entfernt. Das Ersetzen funktioniert nicht bei doppelten Anführungszeichen. Die Verwendung des Teilstrings und des Ersetzens ist in Ordnung, behandelt jedoch keine doppelten Anführungszeichen. backgroundImage.slice(4, -1).replace(/["']/g, "");ist das, wonach Sie suchen
narthur157
1
@ narthur157 stimmte zu und wurde aktualisiert, aber dies ist eine 7 Jahre alte Antwort. 😅
Praveen Kumar Purushothaman
1 

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}`);
    });
}
Erweitern Sie das Snippet

武 状元
quelle
0

Protokollieren Sie, um alle background-imageURLs ohne Klammern und Anführungszeichen zu trösten :

var element = document.getElementById('divId');
var prop = window.getComputedStyle(element).getPropertyValue('background-image');
var re = /url\((['"])?(.*?)\1\)/gi;
var matches;
while ((matches = re.exec(prop)) !== null) {
    console.log(matches[2]);
}
Alissonmüller
quelle