infos24 JavaScript > JavaScript Handbuch Zugriff auf css mit JavaScript

Zugriff auf Cascading Style Sheets mit JavaScript

Wie bereits im Kapitel Cascading Style Sheets erwähnt, ist dies kein Handbuch zu css. Wir werden über css in Kürze ein Handbuch schreiben. Dies ist ein Handbuch über JavaScript. Auf css wurde im Kapitel vorher nur insoweit eingegangen, als es für das Verständnis dieses Kapitels sinnvoll ist. css an sich ist auch einfach, es ist nur viel. Ist das Prinzip jedoch klar, ist es nicht besonders schwierig, alle css Anweisungen zu verstehen. Das Grundprinzip ist immer das gleiche. Komplizierter wird es erst dann, wenn css mit JavaScript angesprochen werden soll. Viele Effekte, die man im Netz sieht, basieren darauf, dass die css Formatierung, die ein bestimmtes Element formatiert, dynamisch, das heisst in Abhängigkeit einer Aktion des Users ausgetauscht wird. Einige dieser Möglichkeiten wurden schon im Kapitel Rollover et alter besprochen. Wie dort bereits besprochen, ist es im Spezialfall Hyperlinks einfach, die css Formatierung auszutauschen. Was ist aber, wenn wir etwa das css für eine komplette Zeile austauchen wollen, also einen solchen Effekt erreichen wollen, wie ihn unten stehendes Beispiel illustriert. Fährt man mit der Maus über eine Zeile, ändert sich das Aussehen der Zeile, in der Mauszeiger gerade befindet. Auch dieses Beispiel funktionniert nur mit den sechser Versionen und aufwärts der jeweiligen Browser

Informationen zu Rainer Maria Rilke	Sehr gut gemachte Seite über den Autor des "Buchs der Bilder". Wir sehen uns mit der bedenklichen Tatsache konfrontiert, dass private Initiativen, wie diese Seite, mehr bewegen als Seiten öffentlicher Einrichtungen. Es gäbe jetzt viel zu sagen zum Thema Content im Internet, aber wir lassen das jetzt.
www.thomas-mann.de	Wer meint auf dieser Seite Informationen über Thomas Mann zu finden, der irrt. Man landet bei der Buchhandlung Thomas Mann
www.goethe.de	Auch das starker Tobak. Man erwartet Informationen zu Goethe und landet beim Goethe Institut. Dort wird man dann informiert über die Deutschkurse des Goethe Institutes. Wahnsinnig spannend ! Dann gibt es noch Informationen über Deutschland allgemein, die an jeder Ecke im Internet stehen. Auf Deutsch und Englisch. Mehr Sprachen gibt es für den Leuchtturm der deutschen Kulturvertreter nicht. (Gibt noch was auf Arabisch, das geht dann aber Deutsch und Englisch weiter).
www.schiller.de	Und ? Informationen zu Schiller ? Pustekuchen. Es kommt irgend so ein Flash Teil
www.robert-musil.de	Und ? Informationen zum Autor von "der Mann ohne Eigenschaften" ? Niente Pizza. Domain grabbing Alarm. Kommt under construction.
www.ernst-bloch.de	Bingo !!! Informationen zu einem der bedeutendsten Philosophen des zwanzigsten Jahrhunderts. Zwar noch etwas dürftig das ganze, aber der Wille ist erkennbar.

Der Skript, der das bewirkt, sieht so aus (aus Gründen der Darstellung wurde der Text gekürzt).

<body><html><head><title>javascript und css</title></head>
<body>

<script language="javascript">
function neuer(i)
{

i.style.color="blue";
i.firstChild.firstChild.style.color="black";
i.style.fontSize = "11pt";
i.firstChild.firstChild.style.fontSize="11pt";
i.style.background = "white";
}
function alter(i)
{
i.style.color="black";
i.firstChild.firstChild.style.color="green";
i.style.fontSize = "10pt";
i.firstChild.firstChild.style.fontSize="10pt";
i.style.background = "#CCCCCC";
}
</script>

<table border=0>
<tr onmouseover="neuer(this)" onMouseOut="alter(this)"><td>
<A href="http://www.rilke.de">Informationen zu Rainer Maria Rilke</A>
</td><td>Sehr gute Seite über den Autor des "Buchs der Lieder!</td></tr>
<tr onmouseover="neuer(this)" onMouseOut="alter(this)"><td>
<A href="http://www.thomas-mann.de">www.thomas-mann.de</A>
</td><td>Keine Infor zu Thomas Mann, sondern über eine Buchhandlung</td></tr>
<tr onmouseover="neuer(this)" onMouseOut="alter(this)"><td>
<A href="http://www.goethe.de">www.goethe.de</a>
</td><td>Trivialitäten des Goethe Institutes</td></tr>
<tr onmouseover="neuer(this)" onMouseOut="alter(this)"><td>
<A href="http://www.schiller.de">www.schiller.de</a>
</td><td>Und ? Informationen zu Schiller ? Pustekuchen. Es kommt irgend so ein Flash Teil</td></tr>
<tr onmouseover="neuer(this)" onMouseOut="alter(this)"><td>
<A href="http://www.robert-musil.de">www.robert-musil.de</A>
</td><td> Domain grabbing Alarm. Kommt under construction.</td></tr>
<tr onmouseover="neuer(this)" onMouseOut="alter(this)"><td>
<A href="http://www.ernst-bloch.de">www.ernst-bloch.de</A>
</td><td> Bingo !!! Informationen zu einem der bedeutendsten Philosophen des zwanzigsten Jahrhunderts.</td></tr>
</table>

</body></html>

Wie deutlich zu sehen, wird hier ein Ansatz gewählt, denn wir schon aus dem Kapitel nochmehr Objekte, hyperlinks,body et alter mit DOM her kennen. Merkwürdig ist nun der Parameter, der beim Aufruf der Funktionen neuer() bzw. alter() übergeben wird. Hierfür muss man verstehen, dass bei DOM alle HTML Elemente (als Spezialfall von XML Elementen) Knoten sind, folglich auch tr ein Knoten ist. Ein Knoten ist aber ein Objekt und this ist der Verweis auf eine Instanz dieses Objektes. Der Knoten tr, wie im übrigen jeder Knoten, hat nun eine Menge Eigenschaften, z.B. nodeName für den Namen des Knotens, oder nodeValue für den Wert des Knotens, firstChild für den ersten Kindknoten etc. etc. Angewendet auf ein HTML Dokument hat der Knoten auch noch das Kindobjekt style, das alle möglichen css Formatierungen speichert. Drei dieser Formatierungen, nämlich color, fontSize und background tauschen wir aus. Das war es dann auch schon. Erstaunlich ist dann die Zeile

i.firstChild.firstChild.style.fontSize="11pt";

Hierfür müssen wir verstehen, dass i den Wert von this animmt (für Übergabe von Parametern an Funktionen siehe Funktionen). this wiederum ist ein Zeiger auf die Instanz des jeweiligen Knotens, aus dem heraus die Funktion aufgerufen wird. Mit this landen wir also, wenn es aus der ersten Zeile heraus aufgerufen wurde in

document.getElementByTagName("tr")[0]

also zu Deutsch beim ersten tr Element. Das Problem ist nun, dass wir mit

i.style.color="blue";

(was in Bezug auf das erste tr Element gleichbedeutend ist mit document.getElementByTagName("tr")[0]

.style.color="blue")

lediglich die Farbe für die Textelemente austauschen, die Kinder oder Kindeskinder von tr sind. Der Text beim Hyperlink ist aber kein Kind oder Kindeskind von tr, sondern vom Element A. Mit i.style.color="blue" ändern wir nur die Farbe im Feld Beschreibung ("Sehr gut gemachte Seite über den Dichter ......."), nicht aber die Farbe des Hyperlinks. Um die Farbe des Hyperlinks zu ändern, müssen wir erst in den entsprechenden Knoten fahren.

i.firstChild.firstChild.style.color="blue";

Wir müssen uns klar machen, dass der Textknoten, der die Beschriftung des Hyperlinks darstellt, zwei Hierarchiestufen unterhalb von tr sitzt (zuerst kommt td und dann a). Mit ..firstChild.firstChild wandern wir diese zwei Hierarchiestufen nach unten. Wenn wir dann beim Knoten a angelangt sind, weisen wir mit style.color diesem einen neuen Wert zu. Aus didaktischen Gründen vereinfachen wir das Beispiel nochmal und lassen uns ein paar Zwischenwerte zeigen.

Informationen zu Rainer Maria Rilke

Sehr gut gemachte Seite über den Autor des "Buchs der Bilder". Wir sehen uns mit der bedenklichen Tatsache konfrontiert, dass private Initiativen, wie diese Seite, mehr bewegen als Seiten öffentlicher Einrichtungen. Es gäbe jetzt viel zu sagen zum Thema Content im Internet, aber wir lassen das jetzt.

Wir sehen also wenn wir mit der Maus über die Zeile fahren und dort clicken in einem alert Fenster die einzelnen Werte. Zur Verdeutlichung wurde in einem zweiten alert Fenster der Knoten nochmal mit dem kompletten Pfad nach dem dom Ansatz angesteuert. Das Programm sieht so aus.

<table border=1>
<tr onmouseover="neuer2(this)" onMouseOut="alter2(this)"><td><A href="http://www.rilke.de">Informationen zu Rainer Maria Rilke</A></td><td>Sehr gut gemachte Seite über den Autor des "Buchs der Bilder". Wir sehen uns mit der bedenklichen Tatsache konfrontiert, dass private Initiativen, wie diese Seite, mehr bewegen als Seiten öffentlicher Einrichtungen. Es gäbe jetzt viel zu sagen zum Thema Content im Internet, aber wir lassen das jetzt.</td></tr>
</table>

Damit dürfte klar sein, wie man mit JavaScript bei jedem x-beliebigen Element die css Formatierungen austauschen kann. Bevor wir eine weitere Möglichkeit besprechen, müssen wir uns noch über etwas anderes klar werden. Der Ansatz oben funktionniert nur, wenn das Element zu Beginn entweder gar keine css Formatierungen hatte, wie hier, oder die Formatierung über das Attribut style definiert wurden. Wir betrachten dieses Beispiel

<html><head><title>cssRules</title></head>
<body
<script language="javascript">
function neuer3(i)
{
document.styleSheets[0].cssRules[0].style.color = "yellow"

}
function alter3(i)
{

i.style.color="black";
i.firstChild.firstChild.style.color="blue";
i.style.fontSize = "12pt";
i.firstChild.firstChild.style.fontSize="12pt";
i.style.background = "white";

}
</script>
<style type=text/css>
td {
background-color:gold;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:red;
}
</style>

<table border=1>
<tr onmouseover="neuer3(this)" onMouseOut="alter3(this)"><td><A href="http://www.rilke.de">Informationen zu Rainer Maria Rilke</A></td><td>Sehr gut gemachte Seite über den Autor des "Buchs der Bilder". Wir sehen uns mit der bedenklichen Tatsache konfrontiert, dass private Initiativen, wie diese Seite, mehr bewegen als Seiten öffentlicher Einrichtungen. Es gäbe jetzt viel zu sagen zum Thema Content im Internet, aber wir lassen das jetzt.</td></tr>
</table>
</body></htm>

Der einzige Unterschied besteht darin, dass in diesem Beispiel bereits eine css Formatierung vorliegt. Eine bestehende css Formatierung läßt sich mit der oben dargestellten Methode nicht überschreiben. Das Beispiel funktionniert also nur noch mit den Eigenschaften, für die noch keine css Formatierung vorliegt, also nur noch für die Beschreibung des Hyperlinks. Für Elemente, deren Gestaltung bereits durch eine css Formatierung festgelegt ist, brauchen wir also ein anderes Verfahren

Zugriff auf das cascading style sheet selbst mit rules bzw. cssrules

nach oben

Das Verfahren funktionniert nun so, dass direkt das cascading style sheet verändert wird, dass das entsprechende Element formatiert. Das ist nun komplizierter, als man meinen könnte, da erstmal das richtige cascading style sheet angesprochen werden muss und zweitens innerhalb dieses cascading style sheets das richtige Element. Man muss sich klar machen, dass eine Seite durch mehrere cascading style sheets beschrieben werden kann, z.B. durch ein externes und durch eine direkt in der Seite und innerhalb der Seite kann es auch mehrere geben. Jedes dieser cascading style sheets definiert nun die Eigenschaften für mehrere Elemente. Folglich muss geklärt werden, welches cascading style sheet und innerhalb dieses cascading style sheets welches Element angesprochen wird. Machen wir uns das anhand eines Beispieles klar. Wir gehen wieder von dem Beispiel aus, dass, aus den genannten Gründen nicht funktionniert hat. Das modifizierte Beispiel, dass dann funktionniert, sieht so aus.

<html><head><title>cssRules</title>
<style type="text/css">
td {
background-color:gold;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:red;
}
a {
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<script language="javascript">
die_Formatierungen=new Array();
function neuer3(i)
{
if (document.styleSheets[0].cssRules)
die_Formatierungen = document.styleSheets[0].cssRules;
else if (document.styleSheets[0].rules)
die_Formatierungen = document.styleSheets[0].rules;
else alert("Das ist keine sechser Version von Explorer oder Netscape");

die_Formatierungen[0].style.background = "yellow";
die_Formatierungen[0].style.color = "blue";
die_Formatierungen[1]. style. fontSize= "18px";
die_Formatierungen[1].style.color = "green";
}

function alter3(i)
{
die_Formatierungen[0].style.background = "gold";
die_Formatierungen[0].style.color = "red";
die_Formatierungen[1].style. fontSize= "14px";
die_Formatierungen[1].style.color= "red";
}
</script>
<table border=1>
<tr onmouseover="neuer3(this)" onMouseOut="alter3(this)">
<td><A href="http://www.rilke.de">Informationen zu Rainer Maria Rilke</A></td>
<td>Sehr gut gemachte Seite über den Autor des "Buchs der Bilder". Wir sehen uns mit der bedenklichen Tatsache konfrontiert, dass
private Initiativen, wie diese Seite, mehr bewegen als Seiten öffentlicher Einrichtungen. Es gäbe jetzt viel zu sagen zum Thema Content im Internet, aber wir lassen das jetzt.</td></tr>
</table>
</body>
</html>

Wer sich das jetzt live anschauen will, kann hier clicken. Wie deutlich zu erkennen, ist das Verfahren nun ein völlig anderes. Wir sprechen nicht das Element an und verändern via Element.style.color, Element.style.bgColor etc. die Formatierung des Elementes selbst. Sondern wir verändern via Array_Stylesheet.angesprochene_Formatierung.style.color, Array_Stylesheet.angesprochene_Formatierung.style.color etc. das cascading style sheet, welches das entsprechende Element formatiert. Machen wir uns klar, wie der Skript funktionnert. Wir haben nicht ernsthaft damit gerechnet, dass die Browser hier compatibel sind und natürlich ist das auch nicht so. Die verschiedenen Formatierungen der jeweiligen Stylesheets spreichert der Explorer in einem Array namens rules, Netscape aber in einem Array namens cssRules. Folglich müssen wir herausfinden, mit welchem Browser wir es zu tun haben, was wir durch diesen Vierzeiler bewerkstelligen.

if (document.styleSheets[0].cssRules)
die_Formatierungen = document.styleSheets[0].cssRules;
else if (document.styleSheets[0].rules)
die_Formatierungen = document.styleSheets[0].rules;
else alert("Das ist keine sechser Version von Explorer oder Netscape");

Wenn das Objekt cssRules vorhanden ist, handelt es sich offensichtlich um Netscape, ist das Objekt rules vorhanden, handelt es sich offensichtlich um den Exploder. Trifft beides nicht zu, haben wir es mit einem Browser zu tun, der weder das eine noch das andere kennt. Wir greifen also mit document.styleSheets[0].cssRules bzw. mit document.styleSheets[0].rules alle Formatierungen des ersten Stylesheets ab, wobei in unserem Fall nur eines vorhanden ist. Alle unsere Formatierungen stecken dann in dem Array die_Formatierungen, genau genommen haben wir einen Array mit Referenzen auf Objekte,die die Formatierungen darstellen. Jede von diesen wiederum hat das Kindobjekt style, welches wiederum Eigenschaften wie color, bgColor,fontSize etc. etc. hat. Mit dieser Zeile

die_Formatierungen[0].style.color = "blue";

weisen wir der ersten Einheit unseres Stylesheets, also dem Bereich der die Zellen formatiert, eine neue Farbe zu und mit diesem Teil

die_Formatierungen[1].style. fontSize= "14px";

weisen wir der zweiten Einheit unseres Stylesheets, also dem Bereich der die Hyperlinks formatiert, eine neue Größe für die Schrift zu.

vorhergehendes Kapitel	nach oben	nächstes Kapitel