Heute stand ich mal wieder vor einem kleinen Problem und bin mir bis jetzt nicht sicher, ob ich es optimal gelöst habe. Ich hoffe auf Verbesserungsvorschläge oder Zustimmung von euch. Mein Problem: Die Hintergrundbild-URL eines Divs muss ausgelesen werden…

Das Problem

An sich ist es kein Problem auf bestimmte Style-Werte von Elementen zuzugreifen. Wenn man jedoch die URL eines Hintergrundbildes (style.backgroundImage) abfragt, erhält man – je nach Browser-Engine – unterschiedliche Rückgabewerte:

Gecko (z.B. Firefox)

url("http://pfad.de/zum/bild.png")

Webkit (z.B. Chrome & Safari)

url(http://pfad.de/zum/bild.png)

Das haben zumindest meine Tests mit den neusten Versionen der jeweiligen Browser ergeben. Bei Chrome und Safari wird die URL nicht in Anführungszeichen gesetzt. Wenn man sich jetzt als Ziel gesetzt hat, nur die URL des Hintergrundbildes abzufragen, muss man beide Engines beachten.

Die Lösung

Meine Lösung besteht darin, dass ich zunächst die Anführungszeichen aus der Zeichenkette entferne und danach alle Zeichen – bis auf die ersten Vier sowie das Letzte – mittels slice() extrahiere:

1

var url = document.getElementById('foo').style.backgroundImage.replace(/\"/g, '').slice(4, -1);

Der Internet Explorer 8 verhält sich in diesem Fall wie der Firefox. Andere Versionen habe ich nicht getestet. Was haltet ihr von dieser Lösung? Gibt es eine bessere oder einfachere Umsetzung?