Ich möchte das Design meiner Seite mittels JavaScript anpassen können (Hintergrundbild, Farbe und Schriften). Ich weiss, dass dazu das Style-Objekt gedacht ist. Nun habe ich das Problem, dass beim auslesen eines Wertes immer Null zurückkommt. Ich erhalte also nicht die errechneten Werte meiner CSS-Datei. Woran kann das liegen?

<p id="ohne-inline-styles">Element ohne Inline-Styles</p>
<p id="mit-inline-styles" style="color: red">Element mit Inline-Styles</p>
 // Gibt einen leeren String aus:
 window.alert(
    document.getElementById("ohne-inline-styles").style.backgroundColor
);
// Gibt »red« aus, weil Inline-Style gesetzt wurde:
window.alert(
    document.getElementById("mit-inline-styles").style.backgroundColor
);

Color setzt nicht die Hintergrund-Farbe sondern die Schrift-Farbe und muss somit mit "style.color" abgefragt werden.

//gibt jetzt wirklich "red" aus
window.alert(
    document.getElementById("mit-inline-styles").style.color
);

NULL wird immer dann zurück gegeben wenn eine Style-Eigenschaft nicht gesetzt ist.

Noch ein kleiner Hinweis zu deinem Theming-Thema. Das ganze sollte man mittels Stylecheets lösen und diese dann mittels JavaScript austauschen. Inline-Styles werden in einem guten Webdesign so gut es geht vermieden.

Hier ein einfaches Beispiel:

<link rel="stylesheet" href="style1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle(url) {
  document.getElementById('stylesheet').href = url;
}

//nach 10 Sekunden den Style wechseln
window.setTimeount(function(){changeStyle('style2.css')}, 10000); 
</script>