Attribut-Wert eines Elementes ändern

[Felix Riesterer]

Lieber Chris,

wie rfb Dir schon ausführlich beschrieben hat, ist die Lösung folgende (siehe Thema meines Postings).

Du hast im Kopf der Datei Dein Stylesheet stehen. Das ist ein <link/>-Element, welches per href-Attribut Dein Stylesheet einbindet. Dieses <link/>-Element nehmen wir uns nun per Javascript zur Brust und ändern den Wert, den es in seinem href-Attribut stehen hat.

Dazu gibt es zwei Möglichkeiten, von denen rfb bereits eine ausführlich erklärt hat:

1. Wir geben dem link-Element eine ID, über die wir es mit Javascript _direkt_ ansprechen können. Diese Variante empfiehlt sich vor allem dann, wenn Du noch mehr Stylesheets (z.B. für Printmedien) einbindest.

2. Wenn es nur ein einziges Stylesheet gibt, dann kann man per Javascript auch alle <link/>-Elemente einzeln abklappern und prüfen, ob sie ein Stylesheet einbinden (man kann ein <link/>-Element ja auch für etwas anderes verwenden!), um dann im entsprechenden Fall (es hat ein rel-Attribut mit dem Wert "stylesheet") den href-Wert zu manipulieren.

Die Lösung von rfb sieht nur eine einmalige Änderung (ohne Zurück) des Stylesheets vor. Wenn Du aber eine echte Auswahl an Styles anbieten möchtest, dann wäre eine Dropdown-Liste mit der Auswahl der Styles ganz praktisch.

<form name="styleswitcher" id="styleswitcher" onsubmit="return styleUmschalten()">  
<p>Style  
    <select name="styleauswahl" id="styleauswahl" size="1">  
        <option value="default.css">Standard</option>  
        <option value="modern.css">modern</option>  
        <option value="crazy.css">abgefahren</option>  
    </select>  
    <input type="submit" name="umschalter" id="umschalter" value="einstellen" />  
</p>  
</form>

Du brauchst jetzt nur noch eine Javascript-Funktion namens "styleUmschalten" (siehe onsubmit-Attribut im <form>-Element!) schreiben, die Dir die momentan ausgewählte Option Deines Select-Feldes ermittelt, und dann Dein <link/>-Element mit dem entsprechenden href-Wert befüllt.

Wie Du diese Funktion schreibst, findest Du im Javascript-Bereich von SELFHTML. Du wirst folgende Funktionen und Eigenschaften brauchen:
document.getElementById()
document.getElementsByTagName()
selectedIndex (eines select-Feldes)
HTML-Element.value

Viel Spaß beim Dazulernen! Es lohnt sich wirklich! Bei Fragen kommst Du wieder hierher. :-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.