style |
|
style: Allgemeines zur Verwendung Methoden:
getAttribute() (Style-Sheet-Angabe ermitteln) |
|
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 alle Style-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.
<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> |
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.
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.
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 |
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.
<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> |
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.
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.
<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> |
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.
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.
<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> |
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 |