JavaScript Style Beispiel 2: Stylesheets in Abhängigkeit von Name oder Tag ändern

Im nun folgenden JavaScript-Beispiel werden wiederum Style-Eigenschaften von HTML-Elementen geändert. Auch hier wird, wie im letzen Beispiel, wieder ein Testelement (das unten definierte SPAN-Tag) verwendet. Die auszuführenden Aktionen werden auch diesmal durch Anklicken der beiden Links, die ebenfalls im unten stehenden Code-Beispiel definiert werden, angestoßen.

In der Funktion nameback() wird dann das HTML-Element ermittelt, auf das sich die Änderung im Stylesheet beziehen soll. Diesmal wird das Element aber durch die Methode getElementsByName() ermittelt. GetElementsByName liefert, anders als die Methode getElementById() alle Elemente, die den übergebenen Namen in ihrem name-Attribut tragen. Die Elemente werden dabei als Array zurückgeliefert. Der Zusatz [0] adressiert im Beispiel das erste Element im gelieferten Array – im Beispiel gibt es nur eines, wobei auch eine Merhfachvergabe dieses Namens denkbar ist. Auf die Style-Eigenschaften wird auch hier wieder über das unter dem Element-Objekt gelegene Style-Objekt – hier das CSS-Attribut "backgroundColor" – zugegriffen. Die zu setzende Hintergrundfarbe wird als hexadezimaler Farbwert in Form einer Zeichenkette angegeben.

Aufgabe der Funktion aback() ist es, alle im HTML-Dokument enthaltenen Elemente des Elementtyps A (alle Links) mit einem neuen Wert für die Hintergrundfarbe zu belegen. Hier kommt die Methode getElementsByTagName() zur Anwendung. Die Methode getElementsByTagName gehört ebenfalls zum in JavaScript vordefinierten Objekt Document. Auch hier wird wieder ein Array geliefert, welches diesmal alle HTML-Elemente des Dokuments enthält, die von Elementtyp a (Anchor) sind. Danach wird mittels For-Schleife die Hintergrundfarbe jedes einzelnen Links auf den angegebenen Farbwert gesetzt.

<span name="testelement_name">Inhalt des zweiten Elements</span><br />
<a href="javascript:aback()" title="">Hintergrundfarbe aller A-Tags &auml;ndern</a><br />
<a href="javascript:nameback()" title="">Hintergrundfarbe des Testelements mit dem Namen "testelement_name" &auml;ndern</a><br />
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Folgende Funktion ändert das erste im HTML-Dokument enthaltene Element,
// welches den Namen 'testelement_name' in seinem name-Attribut trägt.
function nameback () {
  // Setze die Hintergrundfarbe des Elements auf den Farbwert #ddd
  document.getElementsByName ('testelement_name')[0].style.backgroundColor = '#ddd';
}

// Funktion ändert den Farbwert der Hintergrundfarbe aller Links im
// HTML-Dokument.
function aback () {
  // Ermittle alle Elemente des Tag-Typs a
  var ps = document.getElementsByTagName ('a');
  // Für alle Elemente, die von diesem Typ sind...
  for (var i = 0; i < ps.length; i++)
    // setze die Hintergrundfarbe auf den neuen Wert.
    ps[i].style.backgroundColor = '#ccc';
}
// -->
</script>

Inhalt des zweiten Elements
Hintergrundfarbe aller A-Tags ändern
Hintergrundfarbe des Testelements mit dem Namen "testelement_name" ändern

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