Dieses Skript erlaubt der Surferin,
| durch die „Kalenderblätter” zu blättern, |
| und die Darstellung ein wenig anzupassen, wie in der Hilfe beschrieben. |
Das „Blättern” erfolgt, indem die Eigenschaften display und visibility der betroffenen Elemente gesetzt werden. Da hier zwei verschiedene Sätze von CSS-Regeln (für die Bildschirmansicht und den Druck) benutzt werden, muss ich besonders vorsichtig sein. Die direkten Eigenschaften beeinflussen beide Darstellungen. Im Hinblick auf mehrere CSS-Regelsätze (z.B. für Bildschirme, Mobilgeräte und Drucker) ist es sinnvoll, CSS-Eigenschaften nicht direkt per Javascript zu setzen, sondern geeignete Attributwerte zu setzen.
Ich habe mich dennoch entschieden, CSS-Eigenschaften direkt zu setzen. Das angezeigte Kaldenderblatt (div-Element) hat die Eigenschaft display: block. Wenn die Surferin „blättert”, darf ich nicht display: none setzen, weil dann das Blatt nicht gedruckt würde, sondern muss die display-Eigenschaft entfernen. Auf dem Deckblatt ist die Schaltfläche „zurück” (links) verborgen, auf dem Dezember-Blatt ist die Schaltfläche „weiter” (rechts) verborgen. Um die Schaltflächen anzuzeigen, darf ich nicht deren display-Eigenschaft zum Beispiel auf block setzen, weil sie dann auch im Ausdruck erschienen.