SELFHTML: JavaScript / Objektreferenz / style

SELFHTML/Navigationshilfen JavaScript/DOM Objektreferenz
	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 CSS 2.0 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, so dass 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.