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

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

// 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>

Erweitern Sie das Snippet

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