Javascript-Ausgaben

Aus ProgrammingWiki

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
Eine html-Internetseite besteht immer aus mehreren Bestandteilen wie:
* Überschriften (h-Tag)
* Absätzen (p-Tag)
* Formularen (form-Tag)
* ...
Diese lassen sich aus Javascript heraus sehr leistungsstark wie komfortabel verändern ([http://de.wikipedia.org/wiki/Document_Object_Model] DOM]).
Eine besondere Art solcher Bestandteile sind so genannte div-Container (gegenüber den oben genannten, habe diese keinerlei besondere Funktionalität). Fügt man über html auf eine gewünschte Position seiner Seite

<pre>
...
 <div id="ausgabe1"><b>Hier ist der "div"-Container mit dem Namen <i>"ausgabe1"</i></b></div>
...
</pre>

ein, erhält man:

<div id="ausgabe1"><b>Hier ist der "div"-Container mit dem Namen <i>"ausgabe1"</i></b></div>

Benutze jeweils den Button "speichern & ausführen", um Beispiele zu sehen, wie leicht man aus Javascript heraus diesen div-Container ''ausgabe1'' manipulieren kann.

<run id="54e9e7a2428c3" nooutput>
document.getElementById("ausgabe1").style.color = "red";
</run>

<run id="54e9e7a242935" nooutput>
document.getElementById("ausgabe1").style.fontSize = "20px";
</run>

<run id="54e9e922e449e" nooutput>
html="Test";
document.getElementById("ausgabe1").innerHTML = html;
</run>



Die Anweisung ''document.getElementById("ausgabe1").innerHTML = html;''  bedeutet: <br>
* suche im Element ''document''
* ein Element mit dem Namen ''ausgabe1''
* Ändere die Eigenschaft ''innerhtml'' (also was drin steht) auf
* den Wert der Variable html<br>

[[Javascript-Ausgaben-Beispiel1]]