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

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht