SELFHTML: JavaScript / Objektreferenz / style
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Aufgaben und Methoden das style-Objekt in JavaScript hat.
Keywords: SELFHTML, JavaScript, Objekte, Stylesheets, CSS, style, getAttribute, removeAttribute, setAttribute
Date: 2005-11-08T02:11:45+01:00

| # style
| style: Allgemeines zur Verwendung Style-Eigenschaften ### Methoden: getAttribute() (Stylesheet-Angabe ermitteln) removeAttribute() (Stylesheet-Angabe entfernen) setAttribute() (Stylesheet-Angabe einfügen)

## style: Allgemeines zur Verwendung

Das Objekt `style` liegt in der JavaScript-Objekthierarchie nach dem Objektmodell des Internet Explorers ab Version 4.0 unterhalb des all-Objekts und regelt den Zugriff auf Stylesheet-Angaben, die für ein HTML-Element definiert sind. Sie können alle Sheet-Angaben auslesen und dynamisch ändern. So können Sie HTML-Elemente mit Hilfe von Scripts nach Belieben umformatieren.

Der Zugriff auf HTML-Elemente erfolgt dabei genau so wie beim `all`-Objekt (lesen Sie dazu beim `all`-Objekt vor allem die Passagen HTML-Elemente ansprechen und HTML-Elemente mit Namen ansprechen). Beim style-Objekt wird lediglich zusätzlich `style` notiert und dahinter die gewünschte Stylesheet-Angabe.

Auch im Document Object Model (DOM) der Version 2.0 gibt es das `style`-Objekt. Um auf die Eigenschaften und Methoden des `style`-Objekts nach DOM-Syntax zugreifen zu können, benötigen Sie einen Elementknoten. Um auf vorhandene Elementknoten im Dokument zuzugreifen, werden die Methoden des document-Objekts getElementById, getElementsByName und getElementsByTagName verwendet. Ausgehend davon können Sie angesprochene Element mit Hilfe von Scripts umformatieren.

### Beispiel für ältere Microsoft-Syntax (all):

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function MachGelb () {
      document.all.DynText.style.backgroundColor = "yellow";
      document.all.DynText.style.fontSize = "200%";
      document.all.DynText.style.padding = "15px";
    }
    </script>
    </head><body>
    <p id="DynText">Das ist der Text</p>
    <a href="javascript:MachGelb()">gelb</a>
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Textabsatz mit dem id-Namen `DynText`. Beim Anklicken des Verweises unterhalb wird die Funktion `MachGelb()` aufgerufen. Diese Funktion weist dem Textabsatz verschiedene Stylesheet-Angaben zu, zum Beispiel die Angabe für die Hintergrundfarbe (`backgroundColor`) und dabei den Wert für gelb (`yellow`). Der Textabsatz erhält dadurch beim Anklicken des Verweises dynamisch eine gelbe Hintergrundfarbe und die übrigen Attribute.

Es ist egal, ob das betroffene HTML-Element vorher bereits Stylesheet-Angaben enthält oder nicht. Im Beispiel enthält es keine.

Nach dem gleichen Schema können Sie alle CSS Stylesheet-Angaben behandeln, die der Internet Explorer kennt. Die Tabelle Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

### Beispiel für DOM-Syntax:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function setCSS () {
      for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
        document.getElementsByTagName("p")[i].style.border = "solid red 10px";
        document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
        document.getElementsByTagName("p")[i].style.color = "#FFFFFF";
        document.getElementsByTagName("p")[i].style.fontSize = "250%";
      }
    }
    </script>
    </head><body>
    <p>Absatz</p>
    <p>zweiter Absatz</p>
    <p>dritter Absatz</p>
    <p><a href="javascript:setCSS()">Stylesheet-Power!</a></p>
    </body></html>

### Erläuterung:

Das Beispiel enthält vier Textabsätze. Im letzten davon ist ein Verweis notiert, bei dessen Anklicken die Funktion `setCSS()` aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift in einer for-Schleife der Reihe nach mit `document.getElementsByTagName("p")[i]` auf alle `p`-Elemente im Dokument zu. Mit `style` dahinter wird auf die CSS-Eigenschaften des Elements zugegriffen. Dahinter folgt die gewünschte CSS-Eigenschaft. Dieser wird jeweils ein gültiger Wert zugewiesen.

Es ist egal, ob das betroffene HTML-Element vorher bereits Stylesheet-Angaben enthält oder nicht. Im Beispiel enthält es keine.

Nach dem gleichen Schema können Sie alle CSS Stylesheet-Angaben behandeln, die CSS2 kennt. Die Tabelle Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

## Style-Eigenschaften

Eine wichtige Regel müssen Sie kennen: Wenn in einem Script eine CSS-Angabe ausgelesen oder verändert werden soll, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben. Die CSS-Eigenschaft `background-color` wird innerhalb eines JavaScripts also zu `backgroundColor`.

Die folgende Tabelle listet Style-Eigenschaften auf. Die Tabelle enthält links die Stylesheet-Angabe, wie Sie sie in JavaScript im Zusammenhang mit dem Style-Objekt notieren müssen. In der mittleren Spalte steht eine Kurzbeschreibung, was die Angabe bewirkt. Rechts steht jeweils ein Verweis "CSS-Beschreibung". Diese Verweise führen zu der Beschreibung der jeweiligen Stylesheet-Angabe im Kapitel über Stylesheets. Diesen Verweisen sollten Sie folgen, wenn Sie wissen möchten, welche Werte die entsprechende Stylesheet-Angabe haben kann.

JavaScript-Angabe | Kurzbeschreibung | siehe auch
--- | --- | ---
`background` | Hintergrundbild | CSS-Beschreibung
`backgroundAttachment` | Wasserzeichen-Effekt | CSS-Beschreibung
`backgroundColor` | Hintergrundfarbe | CSS-Beschreibung
`backgroundImage` | Hintergrundbild | CSS-Beschreibung
`backgroundPosition` | Position des Hintergrundbilds | CSS-Beschreibung
`backgroundRepeat` | Wallpaper-Effekt | CSS-Beschreibung
`border` | Rahmen | CSS-Beschreibung
`borderBottom` | Rahmen unten | CSS-Beschreibung (border)
`borderBottomColor` | Rahmenfarbe unten | CSS-Beschreibung (border-color)
`borderBottomStyle` | Rahmenart unten | CSS-Beschreibung (border-style)
`borderBottomWidth` | Rahmendicke unten | CSS-Beschreibung
`borderColor` | Rahmenfarbe | CSS-Beschreibung
`borderLeft` | Rahmen links | CSS-Beschreibung (border)
`borderLeftColor` | Rahmenfarbe links | CSS-Beschreibung (border-color)
`borderLeftStyle` | Rahmenart links | CSS-Beschreibung (border-style)
`borderLeftWidth` | Rahmendicke links | CSS-Beschreibung
`borderRight` | Rahmen rechts | CSS-Beschreibung (border)
`borderRightColor` | Rahmenfarbe rechts | CSS-Beschreibung (border-color)
`borderRightStyle` | Rahmenart rechts | CSS-Beschreibung (border-style)
`borderRightWidth` | Rahmendicke rechts | CSS-Beschreibung (border-width)
`borderStyle` | Rahmenart | CSS-Beschreibung
`borderTop` | Rahmen oben | CSS-Beschreibung (border)
`borderTopColor` | Rahmenfarbe oben | CSS-Beschreibung (border-color)
`borderTopStyle` | Rahmenart oben | CSS-Beschreibung (border-style)
`borderTopWidth` | Rahmendicke oben | CSS-Beschreibung (border-width)
`borderWidth` | Rahmendicke | CSS-Beschreibung
`bottom` | Position von unten | CSS-Beschreibung
`captionSide` | Tabellenbeschriftung | CSS-Beschreibung
`clear` | Fortsetzung bei Textumfluss | CSS-Beschreibung
`clip` | Anzeigebereich eingrenzen | CSS-Beschreibung
`color` | Textfarbe | CSS-Beschreibung
`cursor` | Mauszeiger | CSS-Beschreibung
`direction` | Schreibrichtung | CSS-Beschreibung
`display` | Sichtbarkeit (ohne Platzhalter) | CSS-Beschreibung
`emptyCells` | Darstellung leerer Tabellenzellen | CSS-Beschreibung
`cssFloat` | Textumfluss | CSS-Beschreibung
`font` | Schrift | CSS-Beschreibung
`fontFamily` | Schriftart | CSS-Beschreibung
`fontSize` | Schriftgröße | CSS-Beschreibung
`fontStretch` | Schriftlaufweite | CSS-Beschreibung
`fontStyle` | Schriftstil | CSS-Beschreibung
`fontVariant` | Schriftvariante | CSS-Beschreibung
`fontWeight` | Schriftgewicht | CSS-Beschreibung
`height` | Höhe eines Elements | CSS-Beschreibung
`left` | Position von links | CSS-Beschreibung
`letterSpacing` | Zeichenabstand | CSS-Beschreibung
`lineHeight` | Zeilenhöhe | CSS-Beschreibung
`listStyle` | Listendarstellung | CSS-Beschreibung
`listStyleImage` | Grafik für Aufzählungslisten | CSS-Beschreibung
`listStylePosition` | Listeneinrückung | CSS-Beschreibung
`listStyleType` | Darstellungstyp der Liste | CSS-Beschreibung
`margin` | Abstand/Rand | CSS-Beschreibung
`marginBottom` | Abstand/Rand unten | CSS-Beschreibung
`marginLeft` | Abstand/Rand links | CSS-Beschreibung
`marginRight` | Abstand/Rand rechts | CSS-Beschreibung
`marginTop` | Abstand/Rand oben | CSS-Beschreibung
`maxHeight` | Maximalhöhe | CSS-Beschreibung
`maxWidth` | Maximalbreite | CSS-Beschreibung
`minHeight` | Mindesthöhe | CSS-Beschreibung
`minWidth` | Mindestbreite | CSS-Beschreibung
`overflow` | übergroßer Inhalt | CSS-Beschreibung
`padding` | Innenabstand | CSS-Beschreibung
`paddingBottom` | Innenabstand unten | CSS-Beschreibung
`paddingLeft` | Innenabstand links | CSS-Beschreibung
`paddingRight` | Innenabstand rechts | CSS-Beschreibung
`paddingTop` | Innenabstand oben | CSS-Beschreibung
`pageBreakAfter` | Seitenumbruch danach | CSS-Beschreibung
`pageBreakBefore` | Seitenumbruch davor | CSS-Beschreibung
`position` | Positionsart | CSS-Beschreibung
`right` | Position von rechts | CSS-Beschreibung
`scrollbar3dLightColor` | Farbe für 3D-Effekte (Scrollbars) | CSS-Beschreibung
`scrollbarArrowColor` | Farbe für Verschiebepfeile (Scrollbars) | CSS-Beschreibung
`scrollbarBaseColor` | Basisfarbe der Scroll-Leiste (Scrollbars) | CSS-Beschreibung
`scrollbarDarkshadowColor` | Farbe für Schatten (Scrollbars) | CSS-Beschreibung
`scrollbarFaceColor` | Farbe für Oberfläche (Scrollbars) | CSS-Beschreibung
`scrollbarHighlightColor` | Farbe für oberen und linken Rand (Scrollbars) | CSS-Beschreibung
`scrollbarShadowColor` | Farbe für unteren und rechten Rand (Scrollbars) | CSS-Beschreibung
`scrollbarTrackColor` | Farbe für freibleibenden Verschiebeweg (Scrollbars) | CSS-Beschreibung
`tableLayout` | Tabellentyp | CSS-Beschreibung
`textAlign` | Ausrichtung | CSS-Beschreibung
`textDecoration` | Textdekoration | CSS-Beschreibung
`textIndent` | Texteinrückung | CSS-Beschreibung
`textTransform` | Text-Transformation | CSS-Beschreibung
`top` | Position von oben | CSS-Beschreibung
`verticalAlign` | vertikale Ausrichtung | CSS-Beschreibung
`visibility` | Sichtbarkeit (mit Platzhalter) | CSS-Beschreibung
`width` | Breite eines Elements | CSS-Beschreibung
`wordSpacing` | Wortabstand | CSS-Beschreibung
`zIndex` | Schichtposition bei Überlappung | CSS-Beschreibung

## getAttribute()

Ermittelt, ob ein HTML-Element eine bestimmte Stylesheet-Angabe enthält bzw. welchen Wert. Gibt den Wert zurück, den die Stylesheet-Angabe hat, falls sie gefunden wird, ansonsten die leere Zeichenkette `""`. Erwartet folgende Parameter:
1. Style-Angabe = die gesuchte Stylesheet-Angabe.
2. Groß/Kleinschreibung = `true` übergeben, wenn bei der Style-Angabe Groß/Kleinschreibung unterschieden werden soll, oder `false`, wenn es egal ist, wie die Style-Angabe geschrieben ist.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Test () {
      var fontsize = document.all.Absatz.style.getAttribute("fontSize", false);
      alert(fontsize);
    }
    </script>
    </head><body>
    <p id="Absatz" style="font-size:1.5em">Ein Text</p>
    <a href="javascript:Test()">Test</a>
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen `Absatz` und einen Verweis. Beim Anklicken des Verweises wird die Funktion `Test()` aufgerufen. Diese Funktion ermittelt mit `getAttribute()`, ob das Element mit dem Namen `Absatz` eine Stylesheet-Angabe `font-size` (CSS-Syntax) bzw. `fontSize` (JavaScript-Syntax) enthält. Da dies der Fall ist, wird der zugewiesene Wert (`1.5em`) ermittelt. Dieser Wert wird in einem Meldungsfenster ausgegeben.

### Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, können Sie die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung abfragen:
`var fontsize = document.getElementById("Absatz").style.fontSize;`

Selbst wenn Sie den Internet Explorer 4 berücksichtigen müssen, ist `getAttribute()` meistens unnötig. Anstelle des Methoden-Aufrufs im Beispiel können Sie auch einfach direkt `var fontsize = document.all.Absatz.style.fontSize;` notieren. `getAttribute()` wird erst dann gebraucht, wenn der CSS-Eigenschaftsnamen (im Beispiel `fontSize`) nicht fest kodiert ist, sondern in einer String-Variablen vorliegt. In diesem diesen Fall können Sie folgende browserübergreifende Schreibweise verwenden: `var wert = document.getElementById("Absatz").style[eigenschaft];`, wobei `eigenschaft` eine String-Variable z.B. mit dem Inhalt `"fontSize"` ist.

Konqueror kennt die `getAttribute()`-Methode zwar, liefert den korrekten Wert im Beispiel allerdings nur zurück, wenn die Eigenschaft in der CSS-Syntax `"font-size"` statt `"fontSize"` notiert ist. Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

## removeAttribute()

Entfernt ein bestimmtes Attribut aus Stylesheet-Angaben. Erwartet folgende Parameter:
1. Attribut = die gewünschte Stylesheet-Angabe im HTML-Tag.
2. Groß/Kleinschreibung = `true` übergeben, wenn bei der Stylesheet-Angabe Groß/Kleinschreibung unterschieden werden soll, oder `false`, wenn es egal ist, wie die Stylesheet-Angabe geschrieben ist.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Test () {
      document.all.Absatz.style.removeAttribute("color", false);
    }
    </script>
    </head><body>
    <p id="Absatz" style="color:red">Ein Text</p>
    <a href="javascript:Test()">Test</a>
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen `Absatz` und einen Verweis. Beim Anklicken des Verweises wird die Funktion `Test()` aufgerufen. Diese Funktion entfernt aus dem Absatz die Stylesheet-Angabe `color`, sodass der Absatz hinterher die rote Farbe verliert und die Standardfarbe für Text erhält.

### Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, können Sie die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung entfernen:
`document.getElementById("Absatz").style.color = "";`
Durch Zuweisung einer leeren Zeichenkette wird die Style-Eigenschaft dynamisch entfernt.

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

## setAttribute()

Fügt in einem bestimmten HTML-Tag eine bestimmte Stylesheet-Angabe hinzu. Erwartet folgende Parameter:
1. Style-Angabe = die gewünschte Stylesheet-Angabe.
2. Wert = die gewünschte Wertzuweisung für die Stylesheet-Angabe.
3. Groß/Kleinschreibung = `true` übergeben, wenn bei der Stylesheet-Angabe Groß/Kleinschreibung unterschieden werden soll, oder `false`, wenn es egal ist, wie die Stylesheet-Angabe geschrieben wird.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Test () {
      document.all.Absatz.style.setAttribute("border", "thin solid red", false);
    }
    </script>
    </head><body>
    <p id="Absatz">Ein Text</p>
    <a href="javascript:Test()">Test</a>
    </body></html>

### Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen `Absatz` und einen Verweis. Beim Anklicken des Verweises wird die Funktion `Test()` aufgerufen. Diese Funktion fügt in dem Absatz die Stylesheet-Angabe `border` hinzu, und zwar mit der Wertzuweisung `thin solid red`. Dadurch erhält der Absatz einen dünnen roten Rahmen.

### Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, können Sie folgende gleichwertige Zuweisung verwenden:
`document.getElementById("Absatz").style.border = "thin solid red";`

Selbst wenn Sie den Internet Explorer 4 berücksichtigen müssen, kann `setAttribute()` in den meisten Fällen vermieden werden. Anstelle des Methoden-Aufrufs im Beispiel können Sie auch einfach direkt `document.all.Absatz.style.border = "thin solid red";` notieren. `setAttribute()` ist vor allem dann sinnvoll, wenn der CSS-Eigenschaftsnamen (im Beispiel `border`) nicht fest kodiert ist, sondern in einer String-Variablen vorliegt. Auch für diesen Fall gibt es eine browserübergreifende Schreibweise: `document.getElementById("Absatz").style[eigenschaft] = "wert";`, wobei `eigenschaft` eine String-Variable z.B. mit dem Inhalt `"border"` ist.

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

| anchors
| all

© 2007 Impressum