SELFHTML/Quickbar JavaScript Objektreferenz

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

## style: Allgemeines zur Verwendung

Mit dem Objekt `style`, das in der JavaScript-Objekthierarchie unterhalb des all-Objekts liegt, haben Sie Zugriff auf Style-Sheet-Angaben, die für ein HTML-Element definiert sind. Sie können Style-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.

### Beispiel:

    <html><head><title>Test</title>
    <script language="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-Sheet-Eigenschaften listet dieser Style-Sheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Style-Sheet-Angaben in JavaScript.

### Beachten Sie:

Diese 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`.

## Style-Sheet-Eigenschaften

Die folgende Tabelle listet Style-Sheet-Eigenschaften auf, die der MS Internet Explorer 4.0 kennt. 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 | CSS-Beschreibung
`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
`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
`borderLeftColor` | Rahmenfarbe links | CSS-Beschreibung (border-color)
`borderLeftStyle` | Rahmenart links | CSS-Beschreibung (border-style)
`borderLeftWidth` | Rahmendicke links | CSS-Beschreibung
`borderRight` | Rahmen rechts | CSS-Beschreibung
`borderRightColor` | Rahmenfarbe rechts | CSS-Beschreibung (border-color)
`borderRightStyle` | Rahmenart rechts | CSS-Beschreibung (border-style)
`borderRightWidth` | Rahmendicke rechts | CSS-Beschreibung
`borderStyle` | Rahmenart | CSS-Beschreibung
`borderTop` | Rahmen oben | CSS-Beschreibung
`borderTopColor` | Rahmenfarbe oben | CSS-Beschreibung (border-color)
`borderTopStyle` | Rahmenart oben | CSS-Beschreibung (border-style)
`borderTopWidth` | Rahmendicke oben | CSS-Beschreibung
`borderWidth` | Rahmendicke | CSS-Beschreibung
`clear` | Fortsetzung bei Textumfluß | CSS-Beschreibung
`clip` | Anzeigebereich eingrenzen | CSS-Beschreibung
`color` | Textfarbe | CSS-Beschreibung
`cursor` | Mauscursor | CSS-Beschreibung
`display` | Sichtbarkeit (ohne Platzhalter) | CSS-Beschreibung
`font` | Schrift | CSS-Beschreibung
`fontFamily` | Schriftart | CSS-Beschreibung
`fontSize` | Schriftgröße | 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
`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
`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
`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:

    <html><head><title>Test</title>
    <script language="JavaScript">
    function Test()
    {
      x = document.all.Absatz.style.getAttribute("fontSize","false");
      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.

## 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:

    <html><head><title>Test</title>
    <script language="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 Style-Sheet-Angabe `color`, sodaß der Absatz hinterher die rote Farbe verliert und die Standardfarbe für Text erhält.

## 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:

    <html><head><title>Test</title>
    <script language="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 Style-Sheet-Angabe `border` hinzu, und zwar mit der Wertzuweisung `thin solid red`. Dadurch erhält der Absatz einen dünnen roten Rahmen.

weiter: | anchors
zurück: | all

SELFHTML/Quickbar JavaScript Objekt-Referenz

© 1998 Stefan Münz, muenz@csi.com