DOM-Manipulation JavaScript - Der Internet Explorer - CSS-Anweisungen
1. Die Abschnitte
- Einführung
- Namensvergabe
- CSS-Anweisungen
- Formulare
- Event-Handler
2. Ein wichtiger Hinweis
Ab Version 8 leidet der Internet Explorer nicht mehr unter dieser Krankheit. Der kommt damit klar. Ansonsten gelten die folgenden Probleme nach wie vor für seine älteren Geschwister namens 6 und 7.
3. CSS-Attribute
Damit hat unser Lieblingsbrowser so seine liebe Müh und Not. Besonders wenn man den einfachen Weg über setAttribute
beschreitet. Also, wir haben folgende Ausgangssituation:
<style type="text/css">
p.blau { color: #00f; }
</style>
...
<p id="text">Hier kommt Text!</p>
<p><a href="#" onclick="machBlau()">mach blau</a></p>
Nun wollen wir bei einem Klick auf "mach blau" dem Absatzes mit der ID text die entsprechende CSS-Klasse
blau zuweisen (auch wenn man die Klassennamen nicht anhand ihres Aussehens benennen sollte, aber sei's drum).
4. Die "einfache" Variante
setAttribute
function machBlau()
{
var absatz = document.getElementById('text');
absatz.setAttribute('class','blau');
}
Sieht einfach aus und ist es auch. Wir wählen den gewünschten Absatz-Knoten aus und weisen ihm das Attribut class mit
dem Wert blau zu. Das klappt auch wunderbar ... nur nicht im Internet Explorer. Der macht gar nichts.
5. Die funktionierende Variante
Hier muss man einen Umweg in Kauf nehmen. Man erzeugt über das DOM die entsprechenden Elemente und hängt sie in das Dokument ein.
function machBlau()
{
var absatz = document.getElementById('text');
var einfaerb = document.createAttribute ('class');
einfaerb.nodeValue = 'blau'
absatz.setAttributeNode(einfaerb);
}
Erläuterung
Mit einfaerb = document.createAttribute ('class'); erzeugen wir einen Attributknoten und speichern die Referenz
darauf in der Variablen einfaerb ab. Durch einfaerb.nodeValue = 'blau' weisen wir dem besagtem
Attributknoten den Wert der entsprechenden CSS-Klasse mit dem Namen blau zu. Und mittels
absatz.setAttributeNode(einfaerb); hängen wir den Attributknoten in den gewünschten Absatz ein. Und damit kommt sogar
der Internet Explorer klar.
Wichtig!
Dieses Verhalten gilt auch für getAttribute und removeAttribute. Probiert es ruhig mal aus. Das entsprechende
Knowhow solltet ihr bereits haben. Verpasst einfach dem Absatz-Element die Klasse blau und arbeitet dann mit diesen beiden
Werten.
7. ABER!
Wer jetzt denkt, dass er dass auch mit dem style-Attribut machen könnte, der irrt sich gewaltig. Denn da bereitet uns
dieser so genannte Browser aus Redmond wieder Probleme. Das Folgende funktioniert also (mal wieder) nicht!
// Wirft eine Fehlermeldung aus
function machBlau()
{
var absatz = document.getElementById('text');
var einfaerb = document.createAttribute ('style');
einfaerb.nodeValue = 'color: #00f;'
absatz.setAttributeNode(einfaerb);
}
Nun könnte man auf die Idee kommen und das IE-spezifische style.setAttribute zu nehmen, aber davon rate ich ab. Greift
stattdessen lieber auf die korrekte Syntax zurück.
absatz.style.color = '#00f';