JavaScript: Style (Netscape)
von Jan Winkler
Clientseitiges JavaScript bietet durch 3 Objekte den Zugriff auf die StyleSheet-Eigenschaften und -methoden der Elemente eines Dokuments. Diese Objekte sind classes, ids und tags. JScript und die Versionen des Netscape Navigators ab 6.x unterstützen diese nicht (ausschließlich der Netscape 4.x) - hier muss über das style-Objekt auf die Eigenschaften zugegriffen werden.
Das classes-Objekt stellt einen Grundstein auf alle Elemente einer bestimmten Klasse dar. An das Objekt wird der Klassenname quasi als Unterobjekt angehängt. Danach folgt entweder ein Elementname oder all. Als Resultat wird eine Referenz auf alle Elemente oder alle Elemente eines Elementnames zurückgegeben, die der definierten Klasse entsprechen. Dieses zurückgegeben Objekt enthält alle Style-Eigenschaften und -methoden, die unter JavaScript definiert sind.
Notation: Objekt.classes.Klasse.Elementname
Notation: Objekt.classes.Klasse.all
document.classes.KlasseA.P.color = 'red';
// spricht alle <p class="KlasseA"> an und setzt die Textfarbe auf rot
document.classes.KlasseB.all.color = 'black';
// spricht alle <p class="KlasseB">, <em class="KlasseB"> ...
// an und setzt die Textfarbe auf schwarz
Das ids-Objekt stellt eine Referenz auf das Elemente einer bestimmten ID dar. An das Objekt wird die ID (id-Attribut) quasi als Unterobjekt angehängt. Dieses zurückgegebene Objekt enthält alle Style-Eigenschaften und -methoden, die unter JavaScript definiert sind.
Notation: Objekt.ids.ID
document.ids.meineID.color = 'red';
// spricht das Element <p id="meineID">, <span id="meineID">
// oder <h1 id="meineID"> an und setzt die Textfarbe auf rot
Das tags-Objekt stellt eine Referenz auf alle Elemente eines bestimmten Elementnamens dar. An das Objekt wird der Elementname quasi als Unterobjekt angehängt. Dieses zurückgegebene Objekt enthält alle Style-Eigenschaften und -methoden, die unter JavaScript definiert sind.
Notation: Objekt.tags.Elementname
document.tags.P.color = 'red';
// spricht alle Elemente <p> an und setzt die Textfarbe auf rot
Die Style-Eigenschaften entsprechen in etwa den Eigenschaften, die mit CSS 1 definiert wurden. Aufgrund der Namenskonventionen von JavaScript mußten die Eigenschaften jedoch umbenannt werden. Die folgende Tabelle stellt die JavaScript -Namen den CSS-Namen gegenüber:
| JavaScript -Name | CSS-Name | Kurzbeschreibung |
| align | textAlign | Elementausrichtung |
| backgroundColor | background-color | Hintergrundfarbe |
| backgroundImage | background-image | Hintergrundbild |
| borderBottomWidth | border-bottom-width | Rahmenbreite unten |
| borderColor | border-color | Rahmenfarbe |
| borderLeftWidth | border-left-width | Rahmenbreite links |
| borderRightWidth | border-right-width | Rahmenbreite rechts |
| borderStyle | border-style | Rahmenstil |
| borderTopWidth | border-top-width | Rahmenbreite oben |
| clear | clear | Elementfluss |
| color | color | Farbe |
| display | display | Anzeigedefinition |
| fontFamily | font-family | Schriftart |
| fontSize | font-size | Schriftgröße |
| fontStyle | font-style | Schriftstil |
| fontWeight | font-weight | Schriftbreite |
| lineHeight | line-height | Zeilenhöhe |
| listStyleType | list-style-type | Listentyp |
| marginBottom | margin-bottom | Außenabstand unten |
| marginLeft | margin-left | Außenabstand links |
| marginRight | margin-right | Außenabstand rechts |
| marginTop | margin-top | Außenabstand oben |
| paddingBottom | padding-bottom | Innenabstand unten |
| paddingLeft | padding-left | Innenabstand links |
| paddingRight | padding-right | Innenabstand rechts |
| paddingTop | padding-top | Innenabstand oben |
| textAlign | text-align | Textausrichtung |
| textDecoration | text-decoration | Textdekoration |
| textIndent | text-indent | Textvorschub |
| textTransform | text-transform | Textumwandlung |
| whiteSpace | white-space | Leerzeichenbehandlung |
| width | width | Breite |
Die borderWidths-Methode setzt die borderWidthTop-, borderWidthRight-, borderWidthBottom- und borderWidthLeft-Eigenschaften gleichzeitig auf einen neuen Wert. Dazu müssen vier Werte übergeben werden die den Eigenschaften (in der beschriebenen Reihenfolge) übergeben werden sollen.
Notation: Objekt.borderWidths(oben, rechts, unten, links)
document.tags.TABLE.borderWidths('2 px','3 px','2 px','3 px');
Die margins-Methode setzt die marginTop-, marginRight-, marginBottom- und marginLeft-Eigenschaften gleichzeitig auf einen neuen Wert. Dazu müssen vier Werte übergeben werden die den Eigenschaften (in der beschriebenen Reihenfolge) übergeben werden sollen.
Notation: Objekt.margins(oben, rechts, unten, links)
document.tags.P.margins('2 px','3 px','2 px','3 px');
Die paddings-Methode setzt die paddingTop-, paddingRight-, paddingBottom- und paddingLeft-Eigenschaften gleichzeitig auf einen neuen Wert. Dazu müssen vier Werte übergeben werden die den Eigenschaften (in der beschriebenen Reihenfolge) übergeben werden sollen.
Notation: Objekt.paddings(oben, rechts, unten, links)
document.tags.P.paddings('2 px','3 px','2 px','3 px');
borderWidths
