Dynamische Änderung von Styles (Farben):
Die Farben vieler Objekte einer Webseite können mit Hilfe der Methoden
bgColor und fgColor festgestellt
und eingestellt werden.
Analyse und Änderung der aktuellen Farben des <body>-Objekts
dieser Seite:
my_bgcolor = document.body.bgColor;
document.body.bgColor = "#FFFF00"; |
Beispiele für Objekte: document (veraltet,
implizit für document.body), document.body, sowie
jedes von ihnen selbst eingeführte Objekt, wie z.B. <div>
Um guten Kontrast der Texte zu erhalten, müssen sie meist sowohl Hintergrund-
als auch Textfarbe ändern. In einem <style>-Element
wurden daher einige styles definiert, die sie mit Hilfe der Javascript-Links
umschalten können:.
<style type="text/css" media="screen">
.st0 { color: #000000; background-color:#FFFFFF}
.st1 { color: #CC0000; background-color:#DDFFFF; font-family: Verdana,
Arial, Helvetica, sans-serif}
.st2 { color: #008800; background-color:#FFFFDD; font-family: Verdana,
Arial, Helvetica, sans-serif}
.st3 { color: #FFFF00; background-color:#000000}
</style> |
| Stil-Umschaltung von body |
|
|
|
|
Mit dieser script-function schalten sie die style-Klasse des body-Elements
um (ausgenommen jene Objekte, für die eigene styles definiert wurden):
function set_bodystyle(arg0) {
 document.body.className
= arg0;
} |
Hier befindet sich das Objekt
testobj.
Sie können seine style-Klasse mit JS einstellen.
| Stil-Umschaltung von testobj |
|
|
|
|
So sieht das script aus, darunter das betreffende <div>-tag:
function set_teststyle(arg0) {
document.getElementById("testobj").className
= arg0;
}
<div id="testobj">...</div> |