SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
 |
style |
|
Methoden:
|
 | |
Das Objekt style liegt in der JavaScript-Objekthierarchie nach dem Objektmodell des MS Internet Explorers ab Version 4.0 unterhalb des 
all-Objekts und regelt den Zugriff auf 
Style-Sheet-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 Style-Sheet-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 = "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-Eigenschaften listet Style-Sheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Style-Sheet-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 = "36pt";
}
}
//-->
</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>
|
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 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 CSS 2.0 kennt. Die Tabelle Style-Eigenschaften listet Style-Sheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Style-Sheet-Angaben in JavaScript.
 |
Eine 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-Eigenschaften auf. 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.
|
|
|
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.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
var x
if (document.all)
x = document.all.Absatz.style.getAttribute("fontSize","false");
else x=document.getElementById("Absatz").style.fontSize;
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.
Wenn Sie nach DOM-Syntax programmieren, genügt es wie im else-Zweig des Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung abzufragen:
x = document.getElementById("Absatz").style.fontSize
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.
|
|
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.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
if (document.all)
document.all.Absatz.style.removeAttribute("color","false");
else document.getElementById("Absatz").style.color = "";
}
//-->
</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, sodass der Absatz hinterher die rote Farbe verliert und die Standardfarbe für Text erhält.
Wenn Sie nach DOM-Syntax programmieren, genügt es wie im else-Zweig des Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung zu entfernen:
document.getElementById("Absatz").style.color = ""
Durch Zuweisung einer leeren Zeichenkette wird die Style-Eigenschaft dynamisch entfernt.
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.
|
|
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.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
if (document.all)
document.all.Absatz.style.setAttribute("border","thin solid red","false");
else document.getElementById("Absatz").style.border = "thin solid red";
}
//-->
</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.
Wenn Sie nach DOM-Syntax programmieren, genügt es wie im else-Zweig des Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung zu setzen:
document.getElementById("Absatz").style.border = "thin solid red"
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.
|
| |
 |
anchors
|
 |
all
|
| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
© 2001 
selfhtml@teamone.de