SELFHTML/Quickbar  JavaScript  Objektreferenz

style
Diese Seite ist ein Dokument mit Informationstext

  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.

 

MS JScriptMS IE4.0 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

 
 

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

 

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

 

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

1