style, CSSStyleDeclaration | NN 6 IE 4 DOM 2 |
| |
Ganz allgemein ist ein style-Objekt der Zugriffspunkt, über den ein Skript die individuellen Stilattribute eines bestimmten Elements lesen und schreiben kann. Dieses style-Objekt kann die einzelnen vom Browser unterstützten Stylesheet-Attribute (die in Kapitel 11 beschriebenen CSS-Attribute) offen legen.
|
|
In der Praxis ist ein style-Attribut, auf das Sie über die style-Eigenschaft (eine der weiter vorne in diesem Kapitel beschriebenen gemeinsamen Eigenschaften) eines HTML-Elementobjekts zugreifen, in seiner Reichweite jedoch eingeschränkt: Es spiegelt nur die CSS-Einstellungen wider, die über das style-Attribut im Tag des Elements explizit definiert oder der style-Eigenschaft des Elements in einem Skript zugewiesen wurden. Die dargestellten Merkmale des Elements werden jedoch auch von anderen mit dem Browser (internen Stylesheets) und dem Dokument verknüpften Stylesheets (im <style>-Element definierten expliziten Stylesheet-Regeln und über ein link-Element oder eine @import-Regel importierten Regeln) beeinflusst. Die Gesamtheit aller ein Element betreffenden Stylesheet-Attribute – die effektive Stildefinition – kann gelesen werden, jedoch nur über eine browserabhängige Syntax. IE verwendet die Eigenschaft currentStyle eines Elements, Netscape 6 hingegen die W3C-DOM-Methode window.getComputedStyle( ). Beide Syntaxformate geben ein Objekt zurück, mit dessen Hilfe das Skript die Werte der einzelnen effektiven Stilattribute untersuchen kann.
|
|
Während die drei IE-Stilobjekte style, currentStyle und runtimeStyle ein style-Objekt mit Eigenschaften zurückgeben, die die CSS-Stilattribute offen legen, ist die Situation bei Netscape 6 etwas komplizierter. Auf der einen Seite implementiert Netscape 6 eine Version des W3C-DOM-Objekts CSSStyleDeclaration, das alle CSS-Attribute als Eigenschaften offen legt. Diese Version ist über die style-Eigenschaft eines Elements erreichbar (genau wie bei IE, sodass die style-Eigenschaft eines Elementobjekts unabhängig von der Art des Browsers funktioniert). Wenn Sie jedoch mithilfe der Methode window.getComputedStyle( ) das effektive Stylesheet lesen, legt das Objekt, das zurückgegeben wird, die CSS-Attribute nicht direkt als Eigenschaften offen. Stattdessen müssen Sie die unten aufgeführten CSSStyleDeclaration-Methoden verwenden, um einen bestimmten Attributwert anhand seines Namens zu untersuchen. Dieses Verfahren für den Zugriff auf den Wert eines bestimmten effektiven Stilattributs ist langwieriger, passt zugleich jedoch auch sehr gut zu anderen Attributzugriffssyntaxformaten, die im W3C-DOM verwendet werden. Dieser Unterschied zwischen den verschiedenen Browsern betrifft Sie nur, wenn Sie das effektive Stilattribut eines unmodifizierten Stils anzeigen müssen. Nachdem Sie einen Attributwert über die style-Eigenschaft des Elementobjekts festgelegt haben, können Sie ihn unabhängig vom Browser aus der style-Eigenschaft abrufen.
|
|
In diesem Abschnitt finden Sie eine Liste der verfügbaren style-Objekteigenschaften sowie der formalen Netscape 6-Methoden (W3C-DOM) für den Zugriff auf diese Attribute. Das W3C-DOM fasst einen großen Teil der style-Objekteigenschaften in einem Sammelobjekt namens CSS2Properties zusammen. Die Spezifikation stellt das CSS2Properties-Objekt als optionales Hilfsobjekt für die Browser bereit. Zum Glück implementiert Netscape 6 das CSS2Properties-Objekt zumindest für die Elementobjekteigenschaft style, wodurch das browserübergreifende Scripting erleichtert wird.
|
|
Die in der unten stehenden Liste aufgeführten Eigenschaften des style-Objekts entsprechen den CSS-Attributen. Weitere Informationen zu einer bestimmten Eigenschaft finden Sie in der entsprechenden Liste in Kapitel 11.
|
|
Objektmodellreferenz |
|
- [window.]document.getElementById("elementID").style
- [window.]document.styleSheets[i].rules[j].style
- [window.]document.styleSheets[i].cssRules[j].style
|
|
Objektspezifische Eigenschaften |
|
accelerator | azimuth | background |
backgroundAttachment | backgroundColor | backgroundImage |
backgroundPosition | backgroundPositionX | backgroundPositionY |
backgroundRepeat | behavior | blockDirection |
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 | clipBottom |
clipLeft | clipRight | clipTop |
color | content | counterIncrement |
counterReset | cssFloat | cssText |
cue | cueAfter | cueBefore |
cursor | direction | display |
elevation | emptyCells | filter |
font | fontFamily | fontSize |
fontSizeAdjust | fontStretch | fontStyle |
fontVariant | fontWeight | height |
imeMode | layoutFlow | layoutGrid |
layoutGridChar | layoutGridLine | layoutGridMode |
layoutGridType | left | letterSpacing |
lineBreak | lineHeight | listStyle |
listStyleImage | listStylePosition | listStyleType |
margin | marginBottom | marginLeft |
marginRight | marginTop | markerOffset |
marks | maxHeight | maxWidth |
minHeight | minWidth | MozBinding |
MozOpacity | orphans | outline |
outlineColor | outlineStyle | outlineWidth |
overflow | overflowX | overflowY |
padding | paddingBottom | paddingLeft |
paddingRight | paddingTop | page |
pageBreakAfter | pageBreakBefore | pageBreakInside |
pause | pauseAfter | pauseBefore |
pitch | pitchRange | pixelBottom |
pixelHeight | pixelLeft | pixelRight |
pixelTop | pixelWidth | playDuring |
posBottom | posHeight | posLeft |
posRight | posTop | posWidth |
position | quotes | richness |
right | rubyAlign | rubyOverhang |
rubyPosition | scrollbar3dLightColor | scrollbarArrowColor |
scrollbarBaseColor | scrollbarDarkShadowColor | scrollbarFaceColor |
scrollbarHighlightColor | scrollbarShadowColor | scrollbarTrackColor |
size | speak | speakHeader |
speakNumeral | speakPunctuation | speechRate |
stress | styleFloat | tableLayout |
textAlign | textAlignLast | textAutospace |
textDecoration | textDecorationBlink | textDecorationLineThrough |
textDecorationNone | textDecorationOverline | textDecorationUnderline |
textIndent | textJustify | textKashidaSpace |
textOverflow | textShadow | textTransform |
textUnderlinePosition | top | unicodeBidi |
verticalAlign | visibility | voiceFamily |
volume | whiteSpace | widows |
width | wordBreak | wordSpacing |
wordWrap | writingMode | zIndex |
zoom | | |
|
|
Objektspezifische Methoden |
|
getPropertyCSSValue( ) | getPropertyPriority( ) | getPropertyValue( ) |
item( ) | removeProperty( ) | setProperty( ) |
|
|
Objektspezifische Ereignisbehandlungsroutineneigenschaften |
Keine.
|