Dynamische Style Sheets


Mit DHTML und dem DOM Modell kann man dynamisch auf Html Elemente zugreifen und diese ändern. Hat man eine ID zugewiesen kann man über getElementbyId() auf dieses Element zugreifen. Lese dazu in Selfhtml folgende Artikel:

Allgemeines zum Objekt Modell DOM http://de.selfhtml.org/dhtml/modelle/dom.htm Dieses Thema bezieht sich auf die Baumstruktur von XML oder anders ausgedrückt, wie man auf die Tags und Elemente darin zugreifen kann.
<h1 align="center">Hallo <i>Welt</i></h1> Dieses Beispiel stammt aus dem selfhtml Artikel. Dort wird erkärt, wie man auf die einzelnen Elemente zugreifen kann. Hat man das kapiert, hat man schon die Grundlagen intus. Verwandtes Thema XML mit Flash. Siehe das SWF Flashbeispiel.

Allgemeines zur Verwaltung von Style Sheets, sowie eine Liste aller Style Eigenschaften http://de.selfhtml.org/javascript/objekte/style.htm

Wichtig ist hier dass die Eigenschaften mit Bindestrich in dhtml anders geschrieben werden siehe Beispiel:
background-color >>>>> backgroundColor

Das ist eine Textstelle mit der ID feuer.
<span id="feuer">Das ist eine Textstelle mit der ID feuer.</span>
 
Dieser Link soll greift auf Element feuer zu und ändert den Text.
<a href="javascript:;" onclick="document.getElementById('feuer').firstChild.nodeValue = 'Leckomio popoblanco!'">Link</a>
 
Dieser Link greift auf Element feuer zu und ändert die Schriftart.
<a href="javascript:;" onclick="document.getElementById('feuer').style.fontFamily = 'Courier New,Courier'">Link</a>
 
Dieser Link greift auf Element feuer zu und ändert die Eigenschaft Hintergrundfarbe.
<a href="javascript:;" onclick="document.getElementById('feuer').style.backgroundColor = '#990000'">Link</a>
 
Dieser Link setzt alle Eigenschaften zurück.

<script language="JavaScript" type="text/javascript">
function zuruck(){
document.getElementById("feuer").firstChild.nodeValue = "Das ist eine Textstelle mit der ID feuer.";
document.getElementById("feuer").style.fontFamily = "Georgia, Times, serif";
document.getElementById("feuer").style.backgroundColor = "#CCE697";
}
</script>

<a href="javascript:;" onclick="zuruck()">Link</a>

 

Startseite nächste Seite