Stylesheets mit Javascript steuern
Stilwechsel
Sinnvoller Javascript-Einsatz
Stylesheets mit Javascript steuern
Der Einsatz von Javascript sollte wohl überlegt sein: Alternativlose Javascript-Navigationen sind für alle, die Javascript deaktiviert haben, unangenehm. Fast ebenso schlimm sind solche Menüs unter Accessibility-Gesichtspunkten. Wie sollte beispielsweise ein Screenreader eine solche Navigation für einen schlecht sehenden Nutzer vorlesen? Dementsprechend dünnt sich die Reihe der dominanten Javascripts im Web langsam aus. An ihre Stelle treten Hilfsskripts, die dem Nutzer zusätzliche Funktionalität bieten, aber nicht unbedingt für das Funktionieren der Seite nötig sind. In diese Riege fallen viele der Skripts, die sich um CSS-Formatierungen kümmern. Die Standard-Anwendungsgebiete sind dabei zum Beispiel die Schriftgrößenanpassung für den Text der Webseite oder der Wechsel von einer Tages- zur Nacht-Optik. Dieser Artikel erkundet die verschiedenen Möglichkeiten, das eigene CSS per Javascript zu steuern.
Stylesheet austauschen
Stylesheets mit Javascript steuern
Die Komplettlösung besteht darin, ein vollständiges Stylesheet zu wechseln. Zuständig dafür ist die styleSheets-Kollektion. Sie enthält so genannte styleSheet-Objekte. Das sind externe oder in style-Blöcken eingefügte CSS-Befehle. Die Steuerung mit der Kollektion klappt in allen modernen Browsern. Nur der alte Kampfhund Netscape Navigator 4.x muss vor der Tür bleiben. Der Zugriff erfolgt über einen Index:
document.styleSheets[Index]
Dieser Index beginnt bei 0 und enthält die Stylesheets. Leider klappt der Zugriff über eine ID nur mit dem Internet Explorer. Andere Browser verwenden den numerischen Index. Um das StyleSheet-Objekt zu steuern, bietet sich die Eigenschaft disabled an. Sie erhält einen Wahrheitswert und erlaubt so den Wechsel eines Stylesheets, indem Sie eines aktivieren und das andere deaktivieren.
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
Neben disabled gibt es noch ein paar andere Möglichkeiten, beispielsweise über die href-Eigenschaft oder addImport(). Allerdings sind diese größtenteils auf den Internet Explorer beschränkt und dementsprechend in der Praxis meist untauglich.
Regeln ändern sich
Stylesheets mit Javascript steuern
Ganze Stylesheets ein- und auszublenden ist relativ einfacher Standard. Spannender werden Änderungen auf Regel-Ebene. Innerhalb der styleSheets-Kollektion gibt es noch die Möglichkeit, auf einzelne Regeln zuzugreifen.
Die zugehörige Kollektion heißt cssRules für die üblichen standardkonformen Browser wie Firefox, Konqueror, Safari und Netscape. Der Internet Explorer kocht noch ein wenig sein eigenes Süppchen. Die Kollektion rules ist dort für die Regeln zuständig. Die einzige Ausnahme bildet der Internet Explorer 5.x für den Mac. Er kennt sowohl rules als auch cssRules. Beide Kollektionen verwenden einen Index, um auf die einzelnen Regeln, sprich Anweisungsblöcke, im CSS zuzugreifen.
document.styleSheets[0].cssRules[0];
liest die erste Regel für Firefox und Konsorten aus.
document.styleSheets[0].rules[0];
erledigt selbiges für den Internet Explorer. Um innerhalb einer Regel einen Stil zu lesen oder zu setzen, verwenden Sie das style-Objekt. Das sieht dann so aus:
document.styleSheets[0].cssRules[0].style.fontSize = "12pt";
Das Pendant für den Internet Explorer gleicht dem fast bis aufs Haar beziehungsweise das »css«:
document.styleSheets[0].rules[0].style.fontSize = "12pt";
Die Regeln haben allerdings nicht nur Vorteile. Der numerische Index ist eine ziemliche Frickelei, vor allem aber ist er extrem änderungssensibel. Schiebt sich eine Regel dazwischen, ändert sich die Index-Nummerierung. Und dies ist bei einem Stylesheet ja durchaus nichts Ungewöhnliches.
Eleganter: Klassen
Stylesheets mit Javascript steuern
Etwas weniger unhandlich sind CSS-Klassen. Sie lassen sich über Javascript hinzufügen und entfernen. Zuständig dafür ist die Javascript-Eigenschaft className für ein beliebiges HTML-Element. Diese Eigenschaft repräsentiert das class-Attribut des HTML-Tags. Das heißt, Sie müssen zuerst auf das HTML-Element zugreifen und anschließend mit className eine neue Klasse setzen:
Element.className = "NeueKlasse";
Der Zugriff auf das Objekt erfolgt dank W3C-DOM wie gewohnt mit getElementById(), getElementsByTagName() oder getElementByName(). Alternativ können Sie natürlich auch den kompletten DOM-Baum navigieren, um bei vielen Elementen die Klasse zu ändern.
Ein Beispiel soll den Nutzen dieser Variante unterstreichen. Und zwar soll sich die Schriftgröße einer Überschrift und eines Textes auf Knopfdruck ändern. Dies erleichtert es schlechter sehenden Nutzern, Anpassungen vorzunehmen, ohne extra die Browserfunktion für die Schriftgrad-Änderung zu betätigen. Ganz abgesehen davon haben Sie bei dieser Variante die optische Kontrolle, wie stark sich der Schriftgrad ändert. Ausgangspunkt sind drei CSS-Klassen:
.normal {
font-size: 1em;
}
.gross {
font-size: 1.5em;
}
.extragross {
font-size: 2em;
}
Beispiel: Schriftgröße ändern
Stylesheets mit Javascript steuern
In der HTML-Seite selbst befinden sich eine Überschrift und ein Absatz, die jeweils die CSS-Klasse normal besitzen. Drei große A sind als Link versehen und besitzen jeweils je eine der drei Klassen:
Überschrift
Inhalt der Website.
ID in Maßen
Stylesheets mit Javascript steuern
Neben der Klasse lassen sich CSS-Befehle auch einer ID zuordnen. Dies wird in CSS-Layouts oftmals für nur einmal vorkommende Bereiche wie die Kopfzeile, das Menü oder den Inhaltsbereich gemacht. Auch hier ist eine Änderung der ID per Javascript denkbar. Die mit className vergleichbare Eigenschaft ist idName. Allerdings ist das nicht unbedingt empfehlenswert, da die ID ja nicht nur eindeutig sein soll, sondern auch von Javascript selbst (document.getElementById(ID)) eingesetzt wird.
Stile direkt
Stylesheets mit Javascript steuern
Die letzte Disziplin im CSS-Javascript-Kampf ist der Direktzugriff auf einzelne Elemente und ihre Stile. Verantwortlich dafür ist das style-Objekt, das Sie so schon aus der cssRules- beziehungsweise rules-Kollektion kennen. Dieses Objekt gibt es für jedes HTML-Element, auf das Sie zugreifen. Es repräsentiert die Stile, die das Element im eigenen style-Attribut besitzt. Die Javascript-Eigenschaften für die einzelnen Stile sind dann wiederum eine andere Angelegenheit. Sie bilden sich aus dem Namen des CSS-Befehls ? zumindest meistens.
Element.style.color;
Da Javascript-Eigenschaften aber nicht mit Bindestrich geschrieben werden, werden zusammengesetzte CSS-Befehle in Javascript mit Pascal-Case geschrieben. Das bedeutet, der erste Buchstabe des zweiten Begriffs wird mit einem Großbuchstaben direkt an den ersten Begriff angehängt. Aus font-size in CSS wird also fontSize in Javascript. Leider gibt es zu dieser Regel ein paar Ausnahmen. Deswegen reicht eine CSS-Referenz wie www.css4you.de nicht immer aus. In manchen Fällen müssen Sie auch einfach ausprobieren.
Beispiel: Kasten platzieren
Stylesheets mit Javascript steuern
Als Beispiel soll ein Kasten dienen, der auf Knopfdruck die Seiten im Layout wechselt und sich ein- und ausblenden lässt. Dafür gibt es in der HTML-Seite zwei div-Blöcke:
Der div-Block für den Inhalt wird mit <float: left links im HTML-Fluss angeordnet, der div-Block für den Kasten mit float: right rechts. Diese Angabe erfolgt direkt im style-Attribut, da im Beispiel direkt auf das style-Objekt des Elements zugegriffen werden soll.
Im CSS werden die beiden div-Blöcke dann dementsprechend formatiert. Der Inhaltsbereich ist 80 Prozent breit, der Kasten 20 Prozent. Die Hintergrundfarben dienen nur zur Hervorhebung. Die float-Angabe ist an sich unnötig, wird hier aber der Übersichtlichkeit halber wiederholt. Es gilt die speziellere Angabe im style-Attribut:
#inhalt {
width: 80%;
height: 300px;
background-color: green;
float: left;
}
#kasten {
width: 20%;
height: 100px;
background-color: red;
float: right;
}
Ein dritter div-Block liegt unter Inhalt und Kasten und ist unsichtbar, solange der Kasten ausgeblendet ist:
Sie sehen hier schon, dass der div-Block zum Einblenden des Kastens einen Link enthält. Innerhalb des Kastens selbst gibt es eine kleine Werkzeugleiste, die selbst ein div-Block ist:
Zwei Grafiken sind verlinkt und rufen die entsprechenden Javascript-Funktionen zum Ein- und Ausblenden beziehungsweise zum Seitenwechsel auf. Nun aber direkt in den Javascript-Code.
Ein- und Ausblenden
Stylesheets mit Javascript steuern
Das Ein- und Ausblenden erledigt die Funktion einaus(). Sie prüft zuerst, ob der Browser W3C-konform ist. Die Funktionalität würde zwar auch für Netscape Navigator 4.x und Internet Explorer 4 klappen, aber hier wird dieser Code der Übersichtlichkeit halber weggelassen. Die Statusüberprüfung, ob gerade ein- oder ausgeblendet ist, erfolgt über den div-Block mit dem Einblende-Link:
function einaus() {
if (document.getElementById) {
if (document.getElementById("einblenden").style.visibility != "visible") {
} else {
}
}
}
Ist er nicht sichtbar, wird der Kasten ausgeblendet. Dies erfolgt nicht mit Hilfe der visibility, sondern mit display. Der Grund dafür ist ganz einfach: Mit visibility würde der Kasten seinen Platz im Layout behalten. Hier soll der Inhalt aber dann über die volle Breite der Seite gehen. Deswegen wird die Breite des Inhaltsbereichs im Folgenden auf 100 Prozent gesetzt:
document.getElementById("kasten").style.display = "none";
document.getElementById("einblenden").style.visibility = "visible";
document.getElementById("inhalt").style.width = "100%";
Im else-Fall, der auftritt, wenn der Link zum Einblenden sichtbar ist, wird der Kasten mit display = "block" wieder angezeigt und der Link zum Einblenden unsichtbar gemacht. Anschließend ändert sich die Breite des Inhaltsbereichs wieder auf 80 Prozent:
document.getElementById("kasten").style.display = "block";
document.getElementById("einblenden").style.visibility = "hidden";
document.getElementById("inhalt").style.width = "80%";
Seitenwechsel
Stylesheets mit Javascript steuern
Nun geht es an den Seitenwechsel des Kastens: Ort des Geschehens ist eine selbst geschriebene Javascript-Funktion namens change(). Beim Wechsel der Position kommt die CSS-Eigenschaft float zum Einsatz. Sie gehört zu den CSS-Eigenschaften, die in Javascript anders umgesetzt sind. Im Internet Explorer heißt sie styleFloat, in den anderen Browsern cssFloat. Dies erfordert eine Fallunterscheidung mit dem Browserobjekt document.all.
if (document.all) {
IE
} else {
Andere
}
Für den IE erfolgt die Änderung dann mit styleFloat:
if (kasten.styleFloat == "right") {
kasten.styleFloat = "left";
inhalt.styleFloat = "right";
document.wechsel.src = "rechts.png";
} else {
kasten.styleFloat = "right";
inhalt.styleFloat = "left";
document.wechsel.src = "links.png";
}
Die anderen Browser erhalten ihre Positionsänderung mit cssFloat:
if (kasten.cssFloat == "right") {
kasten.cssFloat = "left";
inhalt.cssFloat = "right";
document.wechsel.src = "rechts.png";
} else {
kasten.cssFloat = "right";
inhalt.cssFloat = "left";
document.wechsel.src = "links.png";
}
Fazit
Stylesheets mit Javascript steuern
Welche der vielfältigen CSS- und Javascript-Interaktionsmöglichkeiten Sie verwenden, hängt zuallererst davon ab, ob schon feststeht, welche und wie viele Elemente und CSS-Eigenschaften Sie ändern möchten. Bei größeren Austauscharbeiten bietet sich der komplette Stylesheet-Wechsel an, der Klassenwechsel ist dagegen mit Abstand die flexibelste Methode. Und der Wechsel auf Stilebene erlaubt viel Kontrolle.