 Element hervorheben (getElementById)
Mit einer JavaScript-Funktion die Hintergrundfarbe für ein Seitenelement ändern. Das können Sie beim Laden einleiten oder manuell initiieren. Alternativ könnte ein kleines Script das auch automatisch, abhängig von Ihren Vorgaben einleiten.
|
|
Element hervorheben - Hintergundfarbe ändern
Das was Sie bei dieser Demo durch eine manualle Interaktion auslösen können, kann man natürlich über entsprechende JavaScript-Schalter auch ganz automatisch einleiten lassen. Das setze ich hier für den aktuellen Monat um.
Demo:  aktueller Monat Fabwechsel
Monat 3 Fabwechsel
Monat 7 Fabwechsel
ID = Monat1
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat2
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat3
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat4
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat5
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat6
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat7
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat8
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat9
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat10
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat11
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
ID = Monat12
Nicht lange darauf kam Kay mit großen Fausthandschuhen und seinem Schlitten.
Aufbau + Funktion
Ich habe für dieses Beispiel 12 Seitenlemente mit einer eindeutigen ID versehen. Mit der JavaScript-Funktion FarbeWechseln() kann man die Hintergrundfarbe eines Seitenelements von "white" auf "#EED5FF" schalten.
Zwei Möglichkeiten habe ich hier zu Demo-Zwecken bereits eingebaut:
a) Die manuelle Umschaltung mit einem Link (für jedes Element möglich).
b) Bei dem Element für den aktuellen Monat wird ganz automatisch nach 2 Sekunden die Hintergrundfarbe auf einen anderen Wert gesetzt.
Ich nutze hier "getElementById" um die Eigenschaften eines Elements mit einer bestimmten ID zu verändern. Dabei entspricht "xxx" der ID des Seitenelements. Die Eigenschaft die ich verändern möchte ist in diesem Fall die Hintergrundfarbe (backgroundColor).
Der Wert für die neue Hintergrundfarbe steht in der Variablen 'hervorhebenFarbe'.
document.getElementById("xxx").style.backgroundColor = hervorhebenFarbe;
Sprich: Für das Element mit der ID "xxx" soll gelten: Die Hintergrundfarbe ist das, was in der Variablen hervorhebenFarbe steht, nämlich "#EED5FF"!
1) Farbwechsel Auslösung manuell
Mit der Funktion FarbeWechseln() ist es also möglich, ein beliebiges Seitenelement manuell (über einen Link) anzusteuern und die Hintergrundfarbe zu wechseln. Dazu übergebe ich der Funktion beim Aufruf ein Parameter. Für den Monat 3 z.B. den Wert "3". Der Link dazu hat folgende Syntax:
<a href="javascript:FarbeWechseln(3);">Monat 3 Fabwechsel</a>
Dieser Link ruft die Funktion 'FarbeWechseln' auf und übergibt dabei als Parameter den Wert '3'. Das Script 'baut' daraus den String "Monat3" und steuert danach das Element mit der ID "Monat3" an.
2) Farbwechsel Auslösung automatisch
Meine Funktion untersucht ob überhaupt ein Übergabeparameter vorhanden ist. Wird kein Parameter übergeben, wird automatisch der aktuelle Monat ermittelt und das entsprechende Seitenelement ausgewählt.
FarbeWechseln()
Dieser Auruf der Funktion 'FarbeWechseln' übergibt keinen Wert. Das Script entscheidet über eine if-Anweisung nun, mittels 'getMonth()' einen Zahlenwert für den aktuellen Monat zu ermitteln.
Fazit:
Über entsprechende JavaScript-Schalter kann man also den Farbwechsel automatisch einleiten. Auch die Schalter selbst müssen sich nicht (wie hier) auf den Monat beziehen. Datum, Uhrzeit, Tag, Wochentag, Jahr, ... alles ist möglich.
Für Bastler
Ich steuere hier die Umschaltung der Hintergrundfarbe für bestimmte Elemente. Wenn Sie das Script 'umbauen', könnten Sie ebenso andere Eigenschaften der Seitenelemente verändern. Sie könnten von Unsichtbar auf sichtbar umschalten oder Texte in Normalschrift oder fett anzeigen lassen.
Info - Style-Änderungen wären möglich für (Beispiel-Syntax):
TauschElement.style.backgroundColor = "red";
TauschElement.style.fontSize = "24px";
TauschElement.style.fontFamily = "Verdana, Arial, Courier New";
TauschElement.style.textDecoration = "underline";
TauschElement.style.fontWeight = "bold";
TauschElement.style.visibility = "hidden";
Weitere Module zur Farbänderung:
Bei den ersten beiden Beispielen wird der Aufruf der Funktion zum farbwechsel bei MouseOver eingeleitet und der Wert für die Hintergrundfarbe geändert. Bei MouseOut wird die ursprüngliche Hintergrundfarbe durch den Aufruf einer zweiten Funktion wieder eingestellt.
 Hintergrundfarbe ändern bei MouseOver
Hintergrundfarbe ändern Tabellenzelle
Weitere Module die mit "getElementById" Eigenschaften ändern:
Bild des Monats anzeigen
Bild des Wochentages anzeigen
Grafik für aktuelles Sternzeichen anzeigen
aktuelles Sternzeichen berechnen
| 
Home • JavaScript • getElementById
Quellcode