Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

style

Informationsseite

nach unten style: Allgemeines zur Verwendung
nach unten Style-Eigenschaften

Methoden:

nach unten getAttribute() (Stylesheet-Angabe ermitteln)
nach unten removeAttribute() (Stylesheet-Angabe entfernen)
nach unten setAttribute() (Stylesheet-Angabe einfügen)

 nach unten 

style: Allgemeines zur Verwendung

Das Objekt style liegt in der JavaScript-Objekthierarchie nach dem Objektmodell des Internet Explorers ab Version 4.0 unterhalb des Seite all-Objekts und regelt den Zugriff auf Kapitel 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 Seite HTML-Elemente ansprechen und Seite 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 Seite document-Objekts Seite getElementById, Seite getElementsByName und Seite getElementsByTagName verwendet. Ausgehend davon können Sie angesprochene Element mit Hilfe von Scripts umformatieren.

MS JScriptMS IE 4.0Opera 7Mozilla Firefox 1Konqueror 3.1 Beispiel für ältere Microsoft-Syntax (all):

Beispiel-Seite 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 nach unten Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

DOM 2.0JavaScript 1.5Netscape 6.0MS IE 5.5Opera 6Mozilla Firefox 1Konqueror 3.1Safari 1.0 Beispiel für DOM-Syntax:

Beispiel-Seite 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 Seite Funktion setCSS() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift in einer Seite 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 nach unten Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

nach obennach unten

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

 

nach obennach unten

MS JScriptMS IE 4.0 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:

Beispiel-Seite 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.

nach obennach unten

MS JScriptMS IE 4.0Konqueror 3.1 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:

Beispiel-Seite 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.

nach obennach unten

MS JScriptMS IE 4.0Konqueror 3.1 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:

Beispiel-Seite 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.

 nach oben
weiter Seite anchors
zurück Seite all
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/javascript/objekte/style.htm