JavaScript Style Beispiel 1: Lesend und schreibend auf CSS-Attribute zugreifen

Im folgenden Beispiel wird der lesende, sowie der schreibende Zugriff auf die CSS-Attribute eines HTML-Elements demonstriert. Dazu werden, nach der Definition eines Ausgabeelements (SPAN-Tag), welches mit der ID "testelement_id" gekennzeichnet ist (über diese ID wird das Element später angesprochen), drei Links definiert, die durch Anklicken durch den Benutzer unterschiedliche Aktionen durchführen sollen. Dem SPAN-Element wird zugleich eine Style-Eigenschaft mitgegeben – die Schriftgröße wird auf 1.2em gesetzt, womit die entsprechende Eigenschaft im Style-Objekt mit diesem Wert initialisert wird.

Der erste Link nutzt das JavaScript-Objekt Event. Über das Event onClick, das auftritt wenn der Benutzer auf den Link klickt, wird dem Testelement die CSS-Klasse f zugewiesen und damit die im Style-Bereich darüber definierten CSS-Styles zur Darstellung herangezogen. Diese Zuweisung ändert allerdings nicht die im Style-Objekt des Elements gespeicherten Werte – die als CSS-Klasse definierten CSS-Attribute werden also nicht in das JavaScript Style-Objekt übernommen. Mehr noch: Bereits im Style-Attribut des SPAN-Tags definierte Eigenschaften bleiben erhalten und die in der CSS-Klasse definierten Angaben haben keinerlei Auswirkung mehr auf das Layout. Gleiches gilt für den Fall, dass ein CSS-Attribut mittels Style-Objekt per JavaScript initialisiert wurde. Auch hier wirkt sich ein nachträglich gesetzter Wert zur CSS-Klasse nicht mehr auf die initialisierten CSS-Attribute aus – an der Darstellung ändert sich also nichts. Mit den beiden anderen Links werden Funktionen verknüpft, welche die Style-Eigenschaften des Testelements ausgeben bzw. bestimmte Eigenschaften der CSS-Attribute setzen.

Die erste Funktion im Scriptbereich dient der Ausgabe einiger CSS-Attribute. Zunächst wird über die dem JavaScript-Objekt Document zugehörige Methode getElementById() das HTML-Element ausgewählt, welches untersucht werden soll. Wurde das entsprechende Element gefunden, so werden – falls die jeweiligen CSS-Attribute existieren – die Style-Daten aus dem Style-Objekt des Elements ausgelesen und zu einer Meldung (gespeichert in einer Variablen vom Typ String) zusammengesetzt. Über die Methode alert() des vordefinierten JavaScript-Objekts Window werden die gesammelten Daten am Ende der Funktion ausgegeben.

In der zweiten Funktion wird die Style-Eigenschaft border des Testelements auf einen neuen Wert gesetzt. Auch hier wird, wie bereits in der Funktion getCSSInfo(), zu allererst das zu manipulierende HTML-Element ermittelt. Wird dieses Element gefunden, so setzt die Funktion das Border-Attribut des Style-Objekts auf den Wert "1px solid black", was einem 1 Punkt breiten, schwarzen und durchgezogenen Rahmen entspricht. Nachdem diese Zuweisung erfolgt ist, wird die Darstellung des Testelements mit dem angegebenen Rahmen durch den Browser aktualisiert.

<style>
  .f { font-size:2em; color:green; }
</style>
<span id="testelement_id" style="font-size:1.2em;">Inhalt des ersten Elements</span><br />
<a onclick="document.getElementById ('testelement_id').className = 'f'" title="">Element mit definierter CSS-Klasse formatieren</a><br />
<a href="javascript:getCSSInfo()" title="">CSS-Infos zu testelement_id anzeigen</a><br />
<a href="javascript:addBorder()" title="">Rahmen zu testelement_id hinzuf&uuml;gen</a><br />
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// CSS-Informationen des HTML-Elements mit der ID testelement_id
// ermitteln und in einer Dialog-Box ausgeben
function getCSSInfo () {
  // Element über seine ID ermitteln
  var e = document.getElementById ('testelement_id');
  // Wurde überhaupt ein Element mit der angegebenen ID gefunden?
  if (e) {
    // Variable zur Zusammenstellung der auszugebenden Meldung
    var msg = '';
    // Schriftgröße des Elements ermitteln
    msg += 'Fontsize von Element testelement_id: ' + e.style.fontSize + '\n';
    // Wenn nicht feststeht, dass Style-Angaben definiert sind muss
    // zuvor auf Existenz des Attributes getestet werden.
    if (e.style.border)
      // Rahmen ist definiert => Infos durch auslesen der
      // Eigenschaft ermitteln
      msg += 'Rahmeneigenschaft von testelement_id: ' + e.style.border + '\n';
    else
      // Keine CSS-Angaben zum Rahmen für das Element definiert
      msg += 'Bisher sind keine Rahmeninfos zu testelement_id definiert!\n';
    // Gleiches für die CSS-Eigenschaft color
    if (e.style.color)
      msg += 'Schriftfarbe von testelement_id: ' + e.style.color;
    else
      msg += 'Bisher ist keine Schriftfarbe zu testelement_id definiert!';
    // Ausgabe der ermittelten Informationen in einem Alert-Dialog
    alert (msg);
  }
}

// Rahmen mit Hilfe einer CSS-Formatierung für das Testfeld definieren
function addBorder () {
  // Element über seine ID ermitteln
  var e = document.getElementById ('testelement_id');
  // Wurde überhaupt ein Element mit der angegebenen ID gefunden?
  if (e)
    // Rahmen-Attribut für das Element initialisieren
    e.style.border = '1px solid black';
}
// -->
</script>

Inhalt des ersten Elements
Element mit definierter CSS-Klasse formatieren
CSS-Infos zu testelement_id anzeigen
Rahmen zu testelement_id hinzufügen

« zurück zu Seite 1 weiter zu Seite 3 »