Sep 2008

Javascript :: CSS-Stile als Eigenschaften von node.style

Die Javascript-Methoden setAttribute('style','CSS-Eigenschaften') und getAttribute('style') des DOM gewähren einen konsistenten Zugriff auf CSS-Stile.

Leider unterstützt Internet Explorer 6 setAttribute ausgerechnet für das Setzen des Attributs style nicht, so dass plattformunabhängige Skripte auf die Methode node.style.cssEigenschaft = "" zurückgreifen müssen.

Mit einer einfachen Schreibregel werden CSS-Eigenschaften in Eigenschaften von node übersetzt: Die Bindestriche in den Namen der CSS-Eigenschaften werden weggelassen und anstelle dessen der erste Buchstabe nach dem Bindestrich als Großbuchstabe geschrieben.

background und color – Vordergrundfarbe und Hintergrundgestaltung
EigenschaftBeschreibungCSS-Eigenschaft
background Kurzschrift – fasst alle fünf individuellen Eigenschaften des Hintergrundes zusammen
background ="#FBFAE7 url(citrus.gif) no-repeat fixed right top";		 background
backgroundAttachment entscheidet, ob der Hintergrund fest ist oder scrollt. background-attachment
backgroundColor legt die Hintergrundfarbe eines Elementes fest background-color
backgroundImage legt ein Bild als Hintergrund fest background-image
backgroundPosition Position des Hintergrundbilds
backgroundPosition ="-300px";		 background-position
backgroundRepeat wiederholt das Hintergrundbild entlang der vertikalen und/oder horizontalen Achse. background-repeat
color Vordergrundfarben, Farbe des Textes
color = "white";		 color
border – Stile für die Gestaltung des Rahmens
Eigenschaft Beschreibung CSS-Eigenschaft
border Rahmen border
borderTop
borderRight
borderBottom
borderLeft		 Rahmen oben, Rahmen rechts, Rahmen unten, Rahmen links
Kurzschriften, mit denen die Eigenschaften border-top-width, border-top-style, ..., color in eine Deklaration geschrieben werden können.
borderTop = '8px dashed teal'; 		border-top, border-right, border-bottom, border-left
borderTopColor
borderRightColor
borderBottomColor
borderLeftColor		 notiert die Farbe des oberen, rechten, unteren, linken Rahmens
borderTopColor = "#fff";		 border-top-color, border-right-color, border-bottom-color, border-left-color
borderTopStyle
borderRightStyle
borderBottomStyle
borderLeftStyle		 legt die Darstellung der oberen, rechten, unteren, linken Rahmenlinie fest
borderTopStyle = "solid";
Mögliche Stile sind none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit		 border-top-style, border-right-style, border-bottom-style, border-left-style
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth		 legt die Breite des oberen, rechten, unteren, linken Rahmens fest
borderTopWidth = "thick"; 		border-top-width, border-right-width, border-bottom-width, border-left-width
borderColor Farbe des Rahmens an allen vier Seiten
borderColor = "teal green rgb(200,210,150) #ccc";
borderColor = "#ccc"; 		border-color
borderStyle bestimmt den Stil aller vier Rahmenseiten
borderStyle ="solid dashed dotted outset";
borderStyle ="solid"; 		border-style
borderWidth setzt die Breite aller vier Rahmenseiten in eine Deklaration
borderWidth = "8px 20px 2px thin";
borderWidth = "8px"; 		border-width
Dimension – Eigenschaften für die Abmessungen und das Ausrichten von Elementen
Eigenschaft Beschreibung CSS-Eigenschaft
maxHeight maximale Höhe eines Elements
maxHeight = "150px"; 		max-height
maxWidth maximale Breite eines Elements
maxWidth = "150px";		 max-width
minHeight minimale Höhe eines Elements
minHeight = "150px";		 min-height
minWidth minimale Breite eines Elements
minWidth = "150px"; 		min-width
lineHeight beschreibt den Abstand zwischen aufeinander folgenden Zeilen
lineHeight = "40px"; oder lineHeight = "130%"; 		line-height
height Höhe eines Elements height
width Breite eines Elements width
font – Stile für die Formatierung von Schriften
Eigenschaft Beschreibung CSS-Eigenschaft
font bestimmt in einer Deklaration alle sechs Eigenschaften der Schrift
font = "italic  small-caps  600  1em/128% Courier";		 font
fontFamily wählt eine spezielle Schrift oder eine Schriftfamilie
fontFamily = "Courier, "Zapf Dingbat", serif";		 font-family
fontSize steuert die Größe der Schrift mit Werten, die in einer von vier Kategorien angegeben werden: absolut, relativ, Länge, Prozent
fontSize = "small"; oder fontSize = "larger"; oder fontSize = "2em"; oder fontSize = "150%"; 		font-size
fontStretch Schriftlaufweite gibts nicht mehr
fontStyle stellt die Schrift normal, kursiv und schräg gestellt dar
fontStyle = "italic";		 font-style
fontVariant stellt die Schrift in Kapitälchen da
fontVariant = "small-caps"; oder fontVariant = "normal";		 font-variant
fontWeight stellt die Schrift fett oder in verschiedenen Abstufungen von fett dar
fontWeight = "bold"; oder fontWeight = "normal";		 font-weight
list – Eigenschaften für Aufzählungen
Eigenschaft Beschreibung CSS-Eigenschaft
listStyle kombiniert drei Eigenschaften in einer Deklaration: list-style-image und/oder list-style-position und/oder list-style-type
listStyle = "upper-roman inside";		 list-style
listStyleImage Adresse eines Bildes, das als Aufzählungssymbol in einer Liste benutzt wird
listStyleImage = "url(knopf.gif)";		 list-style-image
listStylePosition legt fest, ob die Listenabsätze eingezogen werden oder nicht
 list-style-position
listStyleType Aufzählungssymbol in einer Liste. Dabei stehen drei Arten von Symbolen zur Verfügung: alphabetisch, Glyphen und numerisch.
listStyleType = "disc";
Mögliche Werte sind disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none 		list-style-type
margin – Stile für den Abstand gegen umfassende und benachbarte Elemente
Eigenschaft Beschreibung CSS-Eigenschaft
margin fasst die individuellen Eigenschaften für marginTop, marginRight, marginBottom und/oder marginLeft zusammen margin
marginTop
marginRight
marginBottom
marginLeft		 Abstand nach oben, rechts, unten, links
marginTop = "0px";		 margin-top, margin-right, margin-bottom, margin-left
padding – Stile für den Abstand von Inhalten zum Rahmen des Elements
Eigenschaft Beschreibung CSS-Eigenschaft
padding Kurzschrift für die Eigenschaften paddingTop, paddingRight, paddingBottom, paddingLeft padding
paddingTop
paddingRight
paddingBottom
paddingLeft		 Abstand von Inhalten zum oberen, rechten, unteren, linken Rahmen padding-top, padding-right, padding-bottom, padding-left
Stile für die Gestaltung von Tabellen
Eigenschaft Beschreibung CSS-Eigenschaft
tableLayout Layoutalgorithmus für die Konstruktion der Tabelle
fixed weist den Browser an, die Tabelle entsprechend der Tabellenbreite (width), der Breite der Spalten, der Rahmen und dem angegebenen Raum zwischen den Zellen zu berechnen. Das Layout der Tabelle hängt nicht vom Inhalt ab und die Tabelle kann schneller dargestellt werden.
tableLayout ="fixed";		 table-layout
borderCollapse Rahmenmodell einer Tabelle. Zwei Rahmenmodelle stehen zur Wahl: collapse und separate. Wenn Tabellenzellen mit einem Rahmen gerendert werden, entsteht ein doppelten Rahmen durch nebeneinander liegende Zellen. border-collapse läßt nebeneinander liegenden Rahmen kollabieren, so dass nur noch ein Rahmenstrich die Zellen voneinander trennt.
borderCollapse = "collapse"; 		border-collapse
borderSpacing bestimmt den vertikalen und horizontalen Raum zwischen benachbarten Zellen im separate-Modell.
borderSpacing = "4px 12px"; 		border-spacing
captionSide Positionierung der Tabellenlegende (caption)
Mögliche Werte: top | bottom
captionSide = "bottom";		 caption-side
emptyCells legt fest, ob Rahmen um leere Tabellenzellen gezogen werden (eine leere Zelle hat keinen sichtbaren Inhalt). Die Eigenschaft wird nur beim separate-Modell angewendet.
emptyCells = "hide";		 empty-cells
Visuelle Formatierung – Positionieren von Elementen
Eigenschaft Beschreibung CSS-Eigenschaft
cssFloat bestimmt, dass ein Element an den linken bzw. rechten Rand des umfassenden Elements versetzt wird – ähnlich dem "Umfließen" von Bildern im Satzprogramm und in der Textverarbeitung. float ist eine von zwei Eigenschaften zur Positionierung – die andere Eigenschaft ist position. float
clear beendet das Umfließen eines schwebenden Elements. Es wird nur auf Blockelemente angewendet. clear
position steuert die grafische Positionierung eines Elements innerhalb des Dokuments/Fensters. position ist eine von zwei Eigenschaften zur Positionierung – die andere Eigenschaft ist float.
position = "absolute";
Mögliche Werte sind absolute | fixed | relative | static 		position
top right bottom left Abstand des oberen, rechten, unteren, linken Rands eines Elements zum umfassenden Block top, right, bottom, left
zIndex Stapelordnung für Elemente, die sich auf dem gleichen Raum überlappen z-index
verticalAlign vertikale Ausrichtung vertical-align
Stile für die Gestaltung von Texten
Eigenschaft Beschreibung CSS-Eigenschaft
letterSpacing Zeichenabstand word-spacing
textAlign Ausrichtung text-align
textDecoration Textdekoration text-decoration
textIndent Texteinrückung text-indent
textTransform Text-Transformation text-transform
wordSpacing Wortabstand word-spacing
direction steuert die Richtung des Textflusses (von links nach rechts oder von rechts nach links) direction
User-Interface – Eigenschaften der Benutzeroberfläche
Eigenschaft Beschreibung CSS-Eigenschaft
cursor Darstellung des Mauszeigers
Mögliche Werte sind url("urladdress") | auto | crosshair | default | help | move | pointer | e-resize | n-resize | ne-resize | nw-resize | progress | s-resize | se-resize | sw-resize | w-resize | text | wait 		cursor
clip Anzeigebereich eingrenzen clip
display steuert die Darstellung eines Elements Die wichtigsten Werte sind block | inline | none display
visibility Sichtbarkeit (mit Platzhalter) visibility
overflow übergroßer Inhalt overflow
paged media – Stile für den Druck
Eigenschaft Beschreibung CSS-Eigenschaft
pageBreakAfter Seitenumbruch danach page-break-after
pageBreakBefore Seitenumbruch davor page-break-before