JavaScript - Tutorial - Objektreferenz - Das style-Objekt nach CSS


Das style-Objekt repräsentiert die CSS-Eigenschaften eines Element-Objekts und ist kein direkter Bestandteil von DOM3, wird aber von den meisten modernen Browsern (Gecko (Mozilla, Netscape, ...), KHTML (Konqueror, ...), MSIE) in die DOM-Objekte eingebunden.

CSS-Attribute des Objekts style
ausgewählte Style-Attribute Erklärung
background  Hintergrund
Aneinanderreihung der Werte für -Attachment, -Color, -Image, -Position, -Repeat, getrennt durch Leerzeichen,
z.B. "black url(droeppez.gif) repeat"
backgroundAttachment  Anordnung des Hintergrundbildes ["scroll" (rollt mit), "fixed" (festgeklebt)]
backgroundColor  Hintergrundfarbe (Farbwert
backgroundImage  Hintergrundbild [uri, "none"]
backgroundPosition  Hintergrundausrichtung ([Prozentwert, Länge], ["top", "center", "bottom"], ["left", "center", "right"])
backgroundRepeat  Hintergrundwiederholung ["repeat", "repeat-x", "repeat-y", "no-repeat"]
border  Rahmen allgemein
Aneinanderreihung der Werte für -Width, -Style, -Color, getrennt durch Leerzeichen,
z.B. "solid 1px black"
borderBottom  Rahmen unten
Aneinanderreihung der Werte für -Width, -Style, -Color, getrennt durch Leerzeichen,
z.B. "solid 1px black"
borderBottomColor Rahmenfarbe unten (Farbwert)
borderBottomStyle  Rahmenstil unten (Rahmenstil-Wert)
borderBottomWidth Rahmenbreite unten (Länge)
borderCollapse  Rahmenmodell für Tabellen ["collapse", "separate"]
borderColor Rahmenfarbe (Farbwert)
borderLeft  Rahmen links
Aneinanderreihung der Werte für -Width, -Style, -Color, getrennt durch Leerzeichen,
z.B. "solid 1px black"
borderLeftColor Rahmenfarbe links (Farbwert)
borderLeftStyle  Rahmenstil links (Rahmenstil-Wert)
borderLeftWidth Rahmenbreite links (Länge)
borderRight  Rahmen rechts
Aneinanderreihung der Werte für -Width, -Style, -Color, getrennt durch Leerzeichen,
z.B. "solid 1px black"
borderRightColor Rahmenfarbe rechts (Farbwert)
borderRightStyle  Rahmenstil rechts (Rahmenstil-Wert)
borderRightWidth Rahmenbreite rechts (Länge)
borderSpacing Rahmenabstand (Länge)
borderStyle  Rahmenstil (Rahmenstil-Wert)
borderTop  Rahmen oben
Aneinanderreihung der Werte für -Width, -Style, -Color, getrennt durch Leerzeichen,
z.B. "solid 1px black"
borderTopColor Rahmenfarbe oben (Farbwert)
borderTopStyle  Rahmenstil oben (Rahmenstil-Wert)
borderTopWidth Rahmenbreite oben (Länge)
borderWidth Rahmenbreite (Länge)
bottom  Startposition von unten [Länge, Prozentwert, "auto"],
in Verbindung mit position="absolute"
clear  Fortsetzung im Textfluß ["none", "left", "right", "both"] (im Zusammenhang mit float)
clip  Abschneiden der Darstellung, Abstände vom jeweiligen Rand.
rect(oben, rechts, unten, links) (alle Werte vom Typ Länge)
z.B. "rect(0px, 0px, 0px, 0px)" (schneidet genau am Objektrand ab)
z.B. "rect(5px, 5px, 5px, 5px)" (schneidet 5 Pixel an jeder Seite ab)
color Vordergrundfarbe (Farbwert)
cssText komplettes CSS-Attribut
cursor  Cursor-Stil [uri, "auto", "crosshair", "default", "pointer", "move", "e-resize", "ne-resize", "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "text", "wait", "help"]
direction  Darstellungsrichtung ["ltr" (von links nach rechts), "rtl" (von rechts nach links)]
display  Anzeigeart ["inline", "block", "list-item", "run-in", "compact", "marker", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group", "table-column", "table-cell", "table-caption", "none"]
float  Anordnung des Elements im umfließenden Text ["left", "right", "none"]
font  Schrift allgemein
Aneinanderreihung der Werte für -Family, -Style, -Variant, -Weight, -Stretch, -Size, getrennt durch Leerzeichen,
z.B. "helvetica, sans-serif, x-large, italic"
fontFamily  Schriftart (Schriftname wie "Helvetica", "Arial", "Times New Roman", "Courier New") und genereller Schriftbezeichner ["serif", "sans-serif", "cursive", "fantasy", "monospace"]
z.B. "helvetica, sans-serif", "courier, monospace"
fontSize  Schriftgröße [["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"], ["smaller", "larger"], Länge, Prozentwert]
fontSizeAdjust  Größenfaktor (Zahl),
z.B. "0.62"
fontStretch  Schriftdehnung ["wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"]
fontStyle  Schriftstil ["normal", "italic", "oblique"]
fontVariant  Schriftvariante ["normale", "small-caps"]
fontWeight  Schriftdicke ["normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
"400" entspricht "normal", "700" entspricht "bold", "900" entspricht "bolder", "100" entspricht "lighter"
height Höhe [Länge, Prozentwert, "auto"]
left  Startposition von links [Länge, Prozentwert, "auto"],
in Verbindung mit position="absolute"
letterSpacing  Zeichenabstand (Länge)
lineHeight  Zeilenhöhe ["normal", Länge, Prozentwert, Zahl]
Länge: absolute Zeilenhöhe
Prozentwert: bezogen auf Grundwert
Zahl: Faktor, bezogen auf Grundwert
listStyle  Listendarstellung
Aneinanderreihung der Werte für -Image, -Position, -Type, getrennt durch Leerzeichen,
z.B. "url(droeppez.gif) inside circle"
listStyleImage  Bild in Listendarstellung [uri, "none"]
listStylePosition  Einrückung in Listen ["inside", "outside"]
listStyleType  Darstellungsart in Listen ["disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katagana", "hiragana-iroha", "katagana-iroha", "none"]
margin  äußerer Randabstand [Länge, Prozentwert, "auto"]
marginBottom  äußerer Randabstand unten [Länge, Prozentwert, "auto"]
marginLeft  äußerer Randabstand links [Länge, Prozentwert, "auto"]
marginRight  äußerer Randabstand rechts [Länge, Prozentwert, "auto"]
marginTop  äußerer Randabstand oben [Länge, Prozentwert, "auto"]
maxHeight  maximale Höhe [Länge, Prozentwert, "none"]
maxWidth  maximale Breite [Länge, Prozentwert, "none"]
minHeight  minimale Höhe [Länge, Prozentwert, "none"]
minWidth  minimale Breite [Länge, Prozentwert, "none"]
overflow  Handhabung von übergroßem Inhalt ["visible", "hidden", "scroll", "auto"]
padding  innerer Randabstand [Länge, Prozentwert]
paddingBottom  innerer Randabstand unten innerer Randabstand [Länge, Prozentwert]
paddingLeft  innerer Randabstand links innerer Randabstand [Länge, Prozentwert]
paddingRight  innerer Randabstand rechts innerer Randabstand [Länge, Prozentwert]
paddingTop  innerer Randabstand oben innerer Randabstand [Länge, Prozentwert]
position Ausrichtung ["absolute", "relative", "fixed"]
right  Startposition von rechts [Länge, Prozentwert, "auto"],
in Verbindung mit position="absolute"
tableLayout  Tabellen-Layout ["fixed", "auto"]
textAlign  Textausrichtung ["left", "right", "center", "justify"]
textDecoration  Text-Dekoration ("underline", "overline", "line-trough", "blink") oder Kombinationen daraus
textIndent  Text-Einrückung [Länge, Prozentwert]
textShadow  Textschattierung (Farbwert, Länge Länge (Länge))
z.B. "black 3px 3px 5px" (schwarzer Schatten, 3px rechts und 3px unterhalb der Schrift, auf 5px auslaufend)
oder "#888888 3px 3px 5px, #dddddd -3px -3px 2px" (breiter grauer Schatten rechts unterhalb plus schmalerer hellgrauer Schatten links oberhalb)
textTransform  Textumwandlung ["capitalize", "uppercase", "lowercase", "none"]
top  Startposition von oben [Länge, Prozentwert, "auto"],
in Verbindung mit position="absolute"
unicodeBidi style-Zeile
verticalAlign vertikale Ausrichtung ["bottom", "top", "center"]
visibility Sichtbarkeit ["show", "hide"]
whiteSpace  Umbruch bei Leerzeichen ["normal", "pre", "nowrap"]
width  Breite [Länge, Prozentwert, "auto"]
wordSpacing Wortabstand (Länge)
zIndex  Darstellungsschicht [ganze Zahl, "auto"]
(Elemente mit höherem zIndex verdecken solche mit niedrigerem zIndex)


ausgewählte Arten von CSS-Attributen
alle Attribute
Jedes Attribut kann alternativ zu seinem Was-auch-immer-Wert auch auf "inherit" gesetzt werden.
Das bedeutet, daß das zugehörige Element diese Eigenschaft vom übergeordneten Element ererbt.

Zahl
ganze oder gebrochene Zahl mit oder ohne Vorzeichen.
Dezimaltrennzeichen ist der Punkt.
Beispiele: "5.36", "-18"

Länge
Zahl mit Einheit.
Einheiten:
  em (relativ zur maßgebenden Schriftgröße)
  ex (relativ zu Kleinbustaben der maßgebenden Schriftgröße)
  px (Pixel, auf Anzeigegerät bezogen)
  in (englische Zoll (inches))
  cm (Zentimeter)
  mm (Millimeter)
  pt (Punkt (1/72 Zoll))
  pc (Pica (12/72 Zoll; 12 Punkte))
Beispiele: "12px", "3mm", "0.5cm", "0.5em", "1.2ex"

Prozentwert
Zahl bezogen auf übergeordnete Abmessung.
Einheit:
  % (Prozent; Hundertstel)
Beispiele: "100%", "33%"

uri (Uniform Resource Identifier)
Lage eines Dokuments.
Beispiel: "url(http://www.droeppez.de/)"

Farbe
"transparent", Schlüsselwort oder RGB-Farbwert (additiv rot+grü+blau).

Farbname (Schlüsselwort) RGB-Entsprechung (hexadezimal)
black "#000000" (schwarz)
gray "#808080" (grau)
silver "#C0C0C0" (hellgrau)
white "#FFFFFF" (weiß)
maroon "#800000" (dunkelrot)
olive "#808000" (dunkelgelb)
green "#008000" (dunkelgrün)
teal "#008080" (dunkeltürkis)
navy "#000080" (dunkelblau)
purple "#800080" (dunkellila)
red "#FF0000" (hellrot)
yellow "#FFFF00" (hellgelb)
lime "#00FF00" (hellgrün)
aqua "#00FFFF" (helltürkis)
blue "#0000FF" (hellblau)
fuchsia "#FF00FF" (helllila)

Beispiele: "red", "#f00", "#F00", "#ff0000", "#FF0000", "rgb(255,0,0)", "rgb(100%,0%,0%)"

Winkel
Zahl der Verdrehung.
  deg (Grad (Vollkreis 360°))
  grad (Gon (Vollkreis 400gon))
  rad (Radiant (Kreisbogenlänge/Radius, Vollkreis 2*π))
Beispiele: "90deg", "100grad", "1.57rad"

Rahmenstil
Rahmenstil (Schlüsselwort) Bedeutung
none        kein Rahmen
hidden kein Rahmen
dotted gepunktet
dashed unterbrochene Linie
solid durchgezogene Linie
double doppelt, duchgezogen
groove eingekratzt
ridge aufmodelliert
inset versenkt
outset erhaben




Funktionen des Objekts style
ausgewählte Funktion Bedeutung
getPropertyValue(name)  Gibt den Wert eines Attributes zurück
name: Attributname
removeProperty(name)  entfernt ein Attribut
name: Attributname


Autor: Ulrich Kritzner