## style

style: Allgemeines zur Verwendung
Style-Eigenschaften

### Methoden:

getAttribute() (Style-Sheet-Angabe ermitteln)
removeAttribute() (Style-Sheet-Angabe entfernen)
setAttribute() (Style-Sheet-Angabe einfügen)

## style: Allgemeines zur Verwendung

Das Objekt `style` liegt in der JavaScript-Objekthierarchie nach dem Objektmodell des MS Internet Explorers ab Version 4.0 unterhalb des all-Objekts und regelt den Zugriff auf Style-Sheet-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 Style-Sheet-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 = "24pt";
     document.all.DynText.style.padding = "5mm";
    }
    //-->
    </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 verschiedende Style-Sheet-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 Atribute.

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

Nach dem gleichen Schema können Sie alle CSS Style-Sheet-Angaben behandeln, die der MS Internet Explorer kennt. Die Tabelle Style-Eigenschaften listet Style-Sheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Style-Sheet-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 = "36pt";
     }
    }
    //-->
    </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 Style-Sheet-Angaben enthält oder nicht. Im Beispiel enthält es keine.

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

## Style-Eigenschaften

Eine wichtige Regel müssen Sie kennen: Wenn in einem Script eine CSS-Style-Sheet-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-Style-Sheet-Angabe `background-color` wird innerhalb eines JavaScripts also zu `backgroundColor`.

Die folgende Tabelle listet Style-Eigenschaften auf. Die Tabelle enthält links die Style-Sheet-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 Style-Sheet-Angabe im Kapitel über CSS Style-Sheets. Diesen Verweisen sollten Sie folgen, wenn Sie wissen möchten, welche Werte die entsprechende Style-Sheet-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 unten | 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
`captionSide` | Tabellenbeschriftung | CSS-Beschreibung
`clear` | Fortsetzung bei Textumfluss | CSS-Beschreibung
`clip` | Anzeigebereich eingrenzen | CSS-Beschreibung
`color` | Textfarbe | CSS-Beschreibung
`cursor` | Mauscursor | CSS-Beschreibung
`direction` | Schreibrichtung | CSS-Beschreibung
`display` | Sichtbarkeit (ohne Platzhalter) | CSS-Beschreibung
`emptyCells` | Darstellung leerer Tabellenzellen | CSS-Beschreibung
`float` | 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` | Mindexthö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` | Texttransformation | 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 Style-Sheet-Angabe enthält bzw. welchen Wert. Gibt den Wert zurück, den die Style-Sheet-Angabe hat, falls sie gefunden wird, ansonsten die leere Zeichenkette `""`. Erwartet folgende Parameter:
1. Style-Angabe = die gesuchte Style-Sheet-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 x
      if (document.all)
      x = document.all.Absatz.style.getAttribute("fontSize","false");
      else x=document.getElementById("Absatz").style.fontSize;
      alert(x);
    }
    //-->
    </script>
    </head><body>
    <p id="Absatz" style="font-size:18pt">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 Style-Sheet-Angabe `font-size` (CSS-Syntax) bzw. `fontSize` (JavaScript-Syntax) enthält. Da dies der Fall ist, wird der zugewiesene Wert (`18pt`) ermittelt. Dieser Wert wird in einem Meldungsfenster ausgegeben.

### Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, genügt es wie im `else`-Zweig des Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung abzufragen:
`x = document.getElementById("Absatz").style.fontSize`
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

## removeAttribute()

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

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    <!--
    function Test() {
     if (document.all)
     document.all.Absatz.style.removeAttribute("color","false");
     else document.getElementById("Absatz").style.color = "";
    }
    //-->
    </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 Style-Sheet-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, genügt es wie im `else`-Zweig des Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung zu entfernen:
`document.getElementById("Absatz").style.color = ""`
Durch Zuweisung einer leeren Zeichenkette wird die Style-Eigenschaft dynamisch entfernt.
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

## setAttribute()

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

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    <!--
    function Test() {
    if (document.all)
    document.all.Absatz.style.setAttribute("border","thin solid red","false");
    else document.getElementById("Absatz").style.border = "thin solid red";
    }
    //-->
    </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 Style-Sheet-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, genügt es wie im `else`-Zweig des Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung zu setzen:
`document.getElementById("Absatz").style.border = "thin solid red"`
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

| anchors
| all

© 2001 selfhtml@teamone.de