JavaScript - Manipulieren der CSS-Eigenschaften und Inhalte eines Seitenelements

Das aufgelistete Beispiel demonstriert das Manipulieren der CSS-Eigenschaften und Inhalte eines Seitenelements. Erforderlich für die Lauffähigkeit des Scripts ist ein moderner Browser, der W3C-DOM und CSS unterstützt (Gecko (Mozilla, Netscape6+, ...), KHTML (Konqueror3+), MSIE5+).

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz Element-Objekttyp] [Objektreferenz Document-Objekttyp] [Objektreferenz style-Objekt]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.


<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

/* globale Variable fuer Element: */
var myElement=0;

function changeBorder(stil)
/* aendert den Rand-Stil der Div-Sektion */
{

/* wenn noch nicht getan Element-Objekt ermitteln */
  if (!myElement)
    myElement=document.getElementById("myBox");

/* Randstil setzen */
  myElement.style.border=stil;
}

function changeBackground(stil)
{

/* wenn noch nicht getan Element-Objekt ermitteln */
  if (!myElement)
    myElement=document.getElementById("myBox");

/* Hintergrundstil setzen */
  myElement.style.background=stil;
}

function changeInnerHTML(inhalt)
{

/* wenn noch nicht getan Element-Objekt ermitteln */
  if (!myElement)
    myElement=document.getElementById("myBox");

/* inneren HTML-Text setzen */
  myElement.innerHTML=inhalt;
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

  <!-- Hier ein paar Style-Angaben, damit es bunt wird: -->
<style type="text/css">
div {background:cyan; border:solid 1px black; margin:2px; padding:5px; position:relative;}
a:link {color:#202060; text-decoration:underline}
a:visited {color:#101050; text-decoration:underline}
a:hover {color:#602020; text-decoration:underline}
a:active {color:#000000; text-decoration:underline}
body {font-family:helvetica,sans-serif; background:white;}
</style>

</head>
<body>

<a href="manipulate.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf manipulate.html -->

  <!-- Hier folgt eine Div-Sektion: --> 
<div name="myBox" id="myBox">die Box</div>

<br>

  <!-- ein paar Funktions-links: -->
<a href="javascript:changeBorder('2px solid blue')">d&uuml;nner blauer Rand</a><br>
<a href="javascript:changeBorder('10px solid red')">dicker roter Rand</a><br>
<br>
<a href="javascript:changeBackground('yellow')">gelber Hintergrund</a><br>
<a href="javascript:changeBackground('lightgreen')">gr&uuml;ner Hintergrund</a><br>
<br>
<a href="javascript:changeInnerHTML('das ist eine Box')">"das ist eine Box" anzeigen</a><br>
<a href="javascript:changeInnerHTML('na sowas')">"na sowas" anzeigen</a><br>

</body>
</html>

Autor: Ulrich Kritzner