CSS mit Javascript manipulieren

[Sir Quicksand]

Hi Leute,

ich habe ein Problem mit JavaScript und CSS und da speziell die Manipulation eines Hintergrundbildes.

Folgenden CSS Eigenschaften ordne ich neue Werte zu, die ich aus einem Formular <input type=text> hole. Das funzt alles.
Code:
document.getElementById('mustertext').style.fontSize
document.getElementById('mustertext').style.fontFamily
document.getElementById('mustertext').style.color
document.getElementById('mustertext').style.backgroundColor

Probleme habe ich mit der Zuordnung eines neuen Bildes.
Code:
document.getElementById('mustertext').style.backgroundImage

Dies kann ich leider irgendwie nicht auf die gleiche Art und Weise ändern, wie ich die anderen Eigenschaften ändere. Selbst wenn man direkt einen Wert zuordnet:
Code:
document.getElementById('mustertext').style.backgroundImage = "hintergrund/alugebuerstet.gif";

auch bei style.background sagt er: "ungültiges Argument"

WARUM?????

[MudGuard]

Hi,

document.getElementById('mustertext').style.fontSize
document.getElementById('mustertext').style.fontFamily
document.getElementById('mustertext').style.color
document.getElementById('mustertext').style.backgroundColor

Äußerst ineffizient. Hol Dir _einmal_ das Element und nutze dann diese Referenz - sonst wird jedesmal der DOM-Baum durchwühlt, wo denn dieses Element sich versteckt.

Probleme habe ich mit der Zuordnung eines neuen Bildes.
document.getElementById('mustertext').style.backgroundImage = "hintergrund/alugebuerstet.gif";

Wie schreibst Du ein background-image im normalen CSS?
Warum willst Du hier was anderes schreiben?

auch bei style.background sagt er: "ungültiges Argument"
WARUM?????

Weil "hintergrund/alugebuerstet.gif" kein gültiger Wert für die background-image-Eigenschaft und auch kein gültiger Wert für die background-Eigenschaft ist.

cu,
Andreas

[Sir Quicksand]

Hi Andreas,

erstmal danke für Deine Antwort.

Hi,

document.getElementById('mustertext').style.fontSize
document.getElementById('mustertext').style.fontFamily
document.getElementById('mustertext').style.color
document.getElementById('mustertext').style.backgroundColor

Äußerst ineffizient. Hol Dir _einmal_ das Element und nutze dann diese Referenz - sonst wird jedesmal der DOM-Baum durchwühlt, wo denn dieses Element sich versteckt.

Wie mache ich das?

Probleme habe ich mit der Zuordnung eines neuen Bildes.
document.getElementById('mustertext').style.backgroundImage = "hintergrund/alugebuerstet.gif";

Wie schreibst Du ein background-image im normalen CSS?
Warum willst Du hier was anderes schreiben?

So schreibe ich ein normales Background-Image ins CSS: background-image:url(hintergrund/alugebuerstet.gif);

auch bei style.background sagt er: "ungültiges Argument"
WARUM?????

Weil "hintergrund/alugebuerstet.gif" kein gültiger Wert für die background-image-Eigenschaft und auch kein gültiger Wert für die background-Eigenschaft ist.

Und wie sieht ein gültiger Wert aus?

[MudGuard]

Hi,

Äußerst ineffizient. Hol Dir _einmal_ das Element und nutze dann diese Referenz - sonst wird jedesmal der DOM-Baum durchwühlt, wo denn dieses Element sich versteckt.
Wie mache ich das?

var bla = document.getElementById('mustertext');
bla.style.color = "red";

So schreibe ich ein normales Background-Image ins CSS: background-image:url(hintergrund/alugebuerstet.gif);

Weil "hintergrund/alugebuerstet.gif" kein gültiger Wert für die background-image-Eigenschaft und auch kein gültiger Wert für die background-Eigenschaft ist.
Und wie sieht ein gültiger Wert aus?

Schau Dir mal das an, was Du selbst hinter "So schreibe ich ein normales Background-Image ins CSS: background-image:" ein paar Zeilen weiter oben geschrieben hast.
Da steht eben nicht (nur) hintergrund/alugebuerstet.gif - wie Du es per Javascript setzen wolltest - sondern etwas mehr.

cu,
Andreas

[Sir Quicksand]

Danke Dir. Funzt.

[Cyx23]

Hallo,

Äußerst ineffizient. Hol Dir _einmal_ das Element und nutze dann diese Referenz - sonst wird jedesmal der DOM-Baum durchwühlt, wo denn dieses Element sich versteckt.
Wie mache ich das?

var bla = document.getElementById('mustertext');
bla.style.color = "red";

der Vollständigkeit halber möchte ich noch auf this und with verweisen:

with(document.getElementById('mustertext')){
style.color = "red";

}

Grüsse

Cyx23

[Tim Tepaße]

Hallo Andreas,

Äußerst ineffizient. Hol Dir _einmal_ das Element und nutze dann diese Referenz - sonst wird jedesmal der DOM-Baum durchwühlt, wo denn dieses Element sich versteckt.

Wobei durchaus zu vermuten ist, dass nicht jedes Mal von neuem der DOM-Baum durchwühlt wird, sondern extra Datenstrukturen dafür existieren, z.B. Hashtables, wie im Safari Blog angedeutet. Das wäre dann ein O(1) Zugriff, also wunderbar smoooooth. Trotzdem würde ich Deine Variante wählen, schon aus ästhetischen und tippfaulen Gründen. ;)

Tim