getElementById()
auf Elemente zugreifen

siehe auch mit Javascript auf Elemente zugreifen werner-zenk Tutorials

Mit DHTML und dem DOM Modell kann man dynamisch auf Html Elemente zugreifen und diese ändern. Hat man eine ID zugewiesen kann man über document.getElementbyId("myId") auf dieses Element zugreifen und CSS Eigenschaften ändern oder einen anderen Text im Gültigkeitsbereich einfügen.

Wichtig ist hier dass die Eigenschaften mit Bindestrich in dhtml in camel-case Weise geschrieben werden:
background-color wird zu backgroundColor

Das ist eine Textstelle mit der ID infoText.
<span id="infoText">Das ist eine Textstelle mit der ID infoText.</span>
 
Dieser Link soll greift auf Element infoText zu und ändert den Text.
<a href="javascript:;" onclick="document.getElementById('infoText').firstChild.nodeValue = 'Hallo ich bin neu hier!'">Link</a>
Auch mit innerHTML kann man auf die Textstelle zugreifen:
<a href="javascript:;" onclick="document.getElementById('infoText').innerHTML = 'hier wurde innerHTML benutzt'">Link</a>
Dieser Link greift auf Element infoText zu und ändert die Schriftart.
<a href="javascript:;" onclick="document.getElementById('infoText').style.fontFamily = 'Courier New,Courier'">Link</a>
 
Dieser Link greift auf Element infoText zu und ändert die Eigenschaft Hintergrundfarbe.
<a href="javascript:;" onclick="document.getElementById('infoText').style.backgroundColor = '#990000'">Link</a>
 
Dieser Link setzt alle Eigenschaften zurück.

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

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

 

  nächste Seite
Javascript Tipps