molily: Funktions-Schleife "hängt" nach erster Funktion

Beitrag lesen

Hallo,

du musst zwei Sachen unterscheiden:

1. Inline-Styles
2. Computed Styles (berechnete Formatierung) und Computed Values (berechnete Werte)

Inline-Style lassen sich über das style-Attribut oder über die style-Eigenschaft in JavaScript setzen.

Wenn du keine Inline-Styles gesetzt hast, sind die Eigenschaften unterhalb von style erst einmal leer! (Leere Strings, also "".)

alert(document.body.style.color) ergibt einen leeren String, wenn du nicht <body style="color:"> notiert oder vorher document.body.style.color = '…' gesetzt hast.

Siehe Direktformatierung über das style-Objekt.

Inline-Styles stehen in der Hierarchie der Stylesheets ganz unten. Darüber stehen die Regeln des Autorenstylesheets. Siehe auch:

http://wiki.selfhtml.org/wiki/CSS/Kaskade
http://www.mediaevent.de/css/css-kaskade.html

Nun zu den Computed Styles. Das sind die tatsächlich verwendeten CSS-Formatierungen. Der Computed Value ist entsprechend der tatsächlich verwendete Wert einer CSS-Eigenschaft. Wie sich der ergibt, regelt die Kaskade. Wenn du z.B. diese CSS-Regel hast …

body { color: red; }

… und sonst keine Angaben diese Regel überschreiben, so ist der berechnete Wert der color-Eigenschaft logischerweise "red".

Den berechneten Wert kannst du nicht mit document.body.style.color auslesen! Denn das spiegelt nur die gesetzten Inline-Styles wider. Den berechneten Wert kannst du mit getComputedStyle(document.body).color auslesen. Siehe CSS-Eigenschaften auslesen.

Jetzt musst du noch beachten, dass der berechnete Wert nicht unbedingt in dem Format vorliegt, in dem die CSS-Eigenschaft gesetzt wurde. Das liegt daran, dass es in CSS z.B. dutzende Möglichkeiten gibt, eine Farbe zu setzen. Anstatt »black«, »#000«, »#000000« kann der Browser »rgb(0, 0, 0)« zurückgeben. Daher ist es schwierig, die Bedingung »Ist der Hintergrund gerade schwarz?« zu formulieren.

Was dein Script angeht, so kannst du durchaus mit document.body.style.color bzw. backgroundColor arbeiten. Allerdings prüfe nicht auf einen bestimmten Wert, sondern nur, ob die Eigenschaft gesetzt wurde. Wenn sie gesetzt wurde, weißt du, dass dein Script schon einmal gelaufen ist. Jetzt musst du natürlich noch wissen, was die Ausgangssituation ist (Tag oder Nacht). Sagen wir einmal, Tag ist die Ausgangssituation. Dann reicht der Test:

var backgroundColor = document.body.style.backgroundColor;  
if (backgroundColor) {  
  // Farbe schon gesetzt, also ist Nacht. Es werde Licht!  
  // Und zwar, indem wir den Inline-Style entfernen. Dadurch greifen wieder die Regeln aus dem Stylesheet.  
  // Gut, wir könnten hier auch einfach  
  backgroundColor = '';  
} else {  
  // Inline-Style nicht gesetzt bzw. leer. Es muss Tag sein. Verdunkle die Sonne!  
  backgroundColor = '#000000';  
}  
document.body.style.background = backgroundColor;

(ungetestet)

Soweit klar geworden?

Eine andere Möglichkeit wäre natürlich, den Tag-/Nacht-Status in einer eigenen Boolean-Variable zu speichern – damit sparst du dir die fehleranfälligen Prüfungen.

Grüße
Mathias