Das style-Objekt

Zugriff auf einzelne CSS-Eigenschaften

Jeder DOM-Knoten enthält als Unter-Objekt das style-Objekt. Dieses Objekt hat zahlreiche Eigenschaften, die es erlauben, den CSS-Style eines Objekts gezielt zu lesen oder zu ändern. Der Zugriff auf das style-Attribut mit Standard-DOM-Methoden ist mühsam, weil das Attribut als komplexer Text vorliegt. Verwenden sie daher das hier vorgestellte style-Unterobjekt.
Ein ganz anderer Zugang ist die Arbeit mit dem Objekt styleSheets :
Damit greift man auf externe ( <link>-Element ) styleSheets und interne <style>--Elemente zu. So kann man die Regeln für CSS-Klassen lesen und schreiben, unabhängig davon, ob und wie oft sie angewendet werden. 		Dieses Kapitel ist relativ umfangreich, außerdem kann das Objekt styleSheets evtl. mit dem style-Objekt verwechselt werden. Daher wird dieses Kapitel demnächst in eine eigene Webseite ausgelagert.
DOM & Javascript Zugriff auf alle Elemente einer Webseite
CSS Cascading Style Sheets
styleSheet styleSheet-Objekte legen CSS-Regeln fest
style lesen Lesen von node.style.eigenschaft mit Javascript
style schreiben Schreiben von node.style.eigenschaft mit Javascript
Namen-Regeln CSS-Syntax → Namen von node.style.eigenschaft
Dynamische styles style-Block mit Live-Javascript erstellen
Liste Unverbindliche Liste der Eigenschaften
Kein Live-Test Reaktion ihres aktuellen Browsers ?

node.style.eigenschaft lesen
Zuerst wird der gesuchte DOM-Knoten identifiziert. Danach haben sie Zugriff auf sein Unterobjekt style und dessen zahlreiche Eigenschaften.
Dabei erhalten sie nur Auskunft über jene Eigenschaften, die über ein style-Attribut definiert wurden (hier: color ). Falls der style durch andere Mittel festgelegt wurde (z.B. Vererbung), erhalten sie eine "Leer"-Auskunft.

Live--Test: style-Objekt lesen
<div id="t1" style="color:blue;">
Mustertext
</div>

n = document.getElementById("t1");
nco = n.style.color;
nfs = n.style.fontSize;
alert("color="+nco+"\nfontSize="+nfs);
Auch ohne explizite Zuweisung wird jedes Element mit einem bestimmten style dargestellt. Dieser ist im Browser vor-eingestellt und kann durch stylesheets, Vererbung usw. geändert werden.
Wenn sie den aktuellen style ermitteln wollen, unabhängig davon, auf welchem Wege dieser zustande gekommen ist, dann müssen sie leider je nach Browser unterschiedliche Methoden anwenden.

M$IE bietet das Objekt currentStyle, welches sich verhält wie das style-Objekt, jedoch den kompletten Regel-Satz des DOM-Knotens enthält, selbst wenn dieser ganz ohne style- oder class-Attribute formatiert wurde.
currentStyle kann nur gelesen werden (readonly).

Gecko (Firefox) bietet die Funktion getComputedStyle:
Diese bietet zusätzlich genaue Informationen über die aktuelle Dimension des Objekts ( width, height ).

Live--Test: aktuellen style lesen
// M$IE
nco = n.currentStyle.color;
nfs = n.currentStyle.fontSize;
alert("color="+nco+"\nfontSize="+nfs);

// Gecko (Firefox, Mozilla(
nco=window.getComputedStyle(n,null).color;
nfs=window.getComputedStyle(n,null).fontSize;
alert("color="+nco+"\nfontSize="+nfs);


♦ Details zum Thema Javascript-Objekt

node.style.eigenschaft schreiben
Zuerst wird der gesuchte DOM-Knoten identifiziert. Danach haben sie Zugriff auf sein Unterobjekt style und dessen zahlreiche Eigenschaften.
Dabei können sie jede style-Eigenschaft schreiben, unabhängig davon, ob sie bereits vorher festgelegt wurde.
Jede style-Zuweisung lässt sich mit einem Leer-String wieder löschen. Damit wird allerdings nur die explizite Zuweisung gelöscht: Die Vor-Einstellungen durch stylesheets, Vererbung etc. treten wieder in Kraft.

Live--Test: eine style-Eigenschaft schreiben
<div id="t2" style="color:blue;">
Mustertext
</div>

n = document.getElementById("t2");
n.style.color = "black";
// Löschen:
// n.style.color="";

Regeln für die Namen von node.style.eigenschaft

In CSS-Manuals und References finden sie alle Eigenschaften nach CSS-Syntax beschrieben. Nur selten finden sich Hinweise auf den Namen der entsprechenden node.style.eigenschaft

Sie können den Namen der node.style.eigenschaft nach den beiden rechts beschriebenen Regeln ableiten. Ich habe jedoch keinen Hinweis gefunden, ob diese Regeln streng gelten, sie sind vermutlich unverbindlich ! 		► Der Name des style-Unterobjekts entspricht bei einfachen Namen genau der CSS-Syntax.
Beispiel: CSS color -> node.style.color

► Wenn der CSS-Name einen Bindestrich enthält, dann wird dieser weggelassen, dafür beginnt das folgende Wort mit einem Großbuchstaben.
Beispiel: CSS background-color -> node.style.backgroundColor

Dynamische styles: styleSheet ( <style>-Block) mit Javascript erstellen
Mit der Javascript-Methode document.write lassen sich dynamisch beliebige Inhalte in eine Webseite schreiben -> auch interne styleSheets ( <style>-Elemente).

Damit können sie Live auf Client-Seite entscheiden, welche CSS-Styles zur Anwendung kommen.

Hinweis: styles müssen vor ihrer Verwendung definiert werden, das entsprechende Script muss sich daher vor der erstmaligen Verwendung im HTML-Code befinden !

In diesem Beispiel wird der CSS-style "teststyle" dynamisch erstellt: Morgens, tagsüber und abends wird der Style unterschiedlich formatiert.
Der Quelltext des <style>-Elements wird in der Variablen txt aufgebaut und zuletzt mit document.write in die Webseite geschrieben. Anschließend kann der hier definierte Style in beliebig vielen class-Attributen verwendet werden.
Wenn sie den Quelltext dieser Webseite ansehen, dann finden sie an der entsprechenden Stelle das Javascript-Programm, nicht jedoch den von ihm "geschriebenen" <style>-Element.

Hinweis: Die Namen der verwendeten Farben finden sie im Kapitel "Farben". 		Javascript:
<script type="text/javascript">
txt = "<style type='text/css'>";
txt+=".teststyle{font-weight:bold;";
stunde = new Date().getHours();
tvar = "background-color:aqua;"
tvar = "text-align:center;";
if(stunde < 10) {
tvar = "background-color:lime;"
tvar = "text-align:left;";
}
else if(stunde > 18) {
tvar = "background-color:yellow;"
tvar = "text-align:right;";
}
txt+=tvar+"}";
txt+="</style>";
document.write(txt);
</script>
HTML:
<div class="teststyle"></div>
Live-HTML:

Liste von Eigenschaften des style-Unterobjekts
Hinweis: Verschiedene Browser & Versionen unterstützen unterschiedliche Eigenschaften !
Daher ist diese Liste unverbindlich !! - Der Inhalt entspricht dem derzeit "besten Wissen" und enthält jene Eigenschaften, die von allen aktuell gängigen Browsern unterstützt werden.
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundPositionX
backgroundPositionY
backgroundRepeat

border
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth

bottom 		captionSide
clear
clip
color
content
counterIncrement
counterReset
cssFloat
cursor

direction
display

emptyCells

font
fontFamily
fontSize
fontSizeAdjust
fontStretch
fontStyle
fontVariant
fontWeight

getAttribute()

height

left
letterSpacing
lineHeight

listStyle
listStyleImage
listStylePosition
listStyleType 		margin
marginBottom
marginLeft
marginRight
marginTop

markerOffset
marks

maxHeight
maxWidth
minHeight
minWidth

orphans

outline
outlineColor
outlineStyle
outlineWidth

overflow
overflowX
overflowY

padding
paddingBottom
paddingLeft
paddingRight
paddingTop

page
pageBreakAfter
pageBreakBefore
pageBreakInside

position 		quotes

right

setAttribute()
styleFloat

tableLayout

textAlign
textDecoration
textDecorationBlink
textDecorationLineThrough
textDecorationNone
textDecorationOverline
textDecorationUnderline
textIndent
textShadow
textTransform

top

unicodeBidi

verticalAlign
visibility

widows
width
wordSpacing

zIndex
Darüber hinaus bieten übliche Browser - z.B. M$IE und Gecko (Firefox) - eine lange Liste spezieller Eigenschaften, die nur vom jeweiligen Browser unterstützt wird. In diesem Web werden nur anerkannte Standards unterstützt, wo immer das möglich ist, daher werden solche Hersteller-spezifischen Eigenschaften nicht angeführt. Die Verwendung ist problematisch, da von vorneherein feststeht, dass BesucherInnen mit unterschiedlichen Browsern die "Wirkung" nur teilweise sehen.
  Links:

Netscape:
style-Object Properties: Erklärungen, Syntax
style-Object Cross Reference: guter Vergleich der Browser-Fähigkeiten (auch M$IE)

SelfHTML (de): style-Objekt

Live--Javascript: Reaktion ihres aktuellen Browsers ?

► Da es unmöglich ist, eine halbwegs aktuelle Liste über die unterstützten Eigenschaften des style-Objekts für alle gängigen Browser / Versionen zu führen, sollte hier ein Live-Test enthalten sein.

► Ich habe keinen Trick gefunden, um einen Browser zur Herausgabe der kompletten Liste unterstützter Eigenschaften zu bringen.
Wenn man einen DOM-Knoten n identifiziert, dann ist das Objekt n.style zwar ansprechbar, gibt jedoch n.style.length=undefined zurück. 		► Ich habe auch keinen Trick gefunden, um wenigstens durch Versuch & Irrtum zu testen, welche style-Eigenschaften ihr Browser unterstützt.
Wenn man einen DOM-Knoten n identifiziert, dann lässt sich das Objekt n.style ohne Fehler auf jede beliebige Eigenschaft setzen, z.B: n.style.color="#0000FF" aber auch n.style.nixgut="xyz"
Das führt soweit, dass sich auch offenbar nicht unterstützte Eigenschaften wieder korrekt auslesen lassen, z.B. test=n.style.nixgut.
Immerhin ist dieses Verhalten nützlich, wenn auf besuchten Webseiten style-Eigenschaften verwendet werden, die vom eigenen Browser nicht unterstützt werden. Der Browser ignoriert die Eigenschaft ohne Fehlermeldung.
► Der einzige Weg, um definitiv herauszufinden, welche style-Eigenschaften ihr Browser unterstützt, ist daher der Selbstversuch: Programmieren sie die gewünschten Scripts und testen sie, ob und wie gängige Standardbrowser die entsprechenden Elemente anzeigen.

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript   >   JS & DOM     (CSS)