document.getElementById.style.backgroundImage funktioniert nicht

Question

Ich möchte verschiedene Hintergrundbilder zu einem div abhängig von der Adresse der Seite zuweisen, also zum Beispiel, wenn meine url ist http://www.mywebsite.com/mysubdirectory/ Ich verwende den folgenden Code:

if(document.URL.indexOf("mysubdirectory") >= 0){ 
   document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
}

Aber es funktioniert nicht. Ich habe sogar einen gefälschten document.write-Befehl hinzugefügt, nur um sicherzustellen, dass der Rest des Codes in Ordnung ist, und die gefälschte Zeile tauchte in meinem Browser auf. Gibt es etwas, das ich übersehen habe?

EDIT: Ich danke Ihnen allen für Ihre Antworten - wenn ich body anstelle von getElementById("wrapper") in meinem Code verwende, wird das Bild angezeigt, so dass ich bezweifle, dass es ein Pfad-bezogenes Problem ist. Ich habe versucht, ein onload-Attribut zum body-Tag hinzuzufügen, aber es funktioniert immer noch nicht mit getElementById. Irgendwelche Ideen?

Answer 1

Ihr

document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";

Code korrekt ist.

Es funktioniert gut in diesem jsfiddle: http://jsfiddle.net/hUuN5/

Sind Sie sicher, dass das Bild korrekt ist? Denken Sie daran, dass der Pfad zur Datei relativ zur aktuellen Seite ist. NICHT das css-Verzeichnis

Answer 2

Ich verwende Chrome 29.0.1547.66 und keine der Antworten hat funktioniert.

Also habe ich es versucht:

document.getElementById("wrapper").style.backgroundImage = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";

Es hat funktioniert, indem ich die Anführungszeichen aus der Bild-URL entfernt habe.

Auch hier funktioniert es: http://jsfiddle.net/xEujg/

html css Hintergrundbild javascript

Answer 3

Versuchen Sie dies, ich denke, die Bild-URL ist höchstwahrscheinlich falsch. Sie brauchen wahrscheinlich einen relativen Pfad:

document.getElementById("wrapper").style.backgroundImage = "url('/bg-wrapper.jpg')";

Answer 4

Die Angabe eines Protokolls hat bei mir in Chrome funktioniert. Mit dem Catch-All "//" konnte ich es nicht zum Laufen bringen. Es musste "http://" sein. Ich nehme an, dass es mit dem Protokoll übereinstimmen muss, das zum Laden der Seite oder des iframe verwendet wurde.

zum Beispiel element.style.backgroundImage="url( http://somedomain.com/images/myimage.jpg )" oder element.style.backgroundImage="url(' http://somedomain.com/images/myimage.jpg ')" hat bei mir funktioniert.

Answer 5

Das funktioniert bei mir:

var pointer =  "url(\'/" + imageArray[imageCounter].toString() + "\')";
document.body.style.backgroundImage = pointer

Nachdem ich ein wenig Zeit damit verbracht habe, war es die Engine des Browsers, die das CSS analysierte. Keine guten Fehler in der Konsole.