JavaScript: Style (Netscape)
Clientseitiges JavaScript bietet durch 3 Objekte den Zugriff auf die StyleSheet-Eigenschaften und -methoden der Elemente eines Dokuments. Diese Objekte sindclasses, 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.
classes 
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
ids
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
tags
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
Eigenschaften
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 |
Methoden
borderWidths
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');
margins
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');
paddings
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');
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project