Zum Inhalt

Inhaltsverzeichnis • Teil 2 - Fortgeschritten • Fortgeschrittene Methoden • Stylesheet umschalten
⇦ Animation / Absätze einblenden ⇨
23.07.2014 19:25:11

Stylesheet umschalten

Dateien: index.html, standard.css, erweitert.css, switchStyle.js

Stylesheet einbinden

Ein immer wieder interessanter Effekt, ist das Umschalten des Stylesheets im laufenden Betrieb.

Auch hier starten wir wieder im Quelltext der Hauptseite. Zunächst stossen wir da innerhalb der Definition der internen Stylesheets auf die Zeile <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" />. Hier verlinken wir zusätlich zum normalen Stylesheet layout.css ein leeres standard.css.

Editor - index.html
  <!-- Stylesheet umschalten - Einbinden des Stylesheets
       ================================================= -->
  <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" />

Stylesheet umschalten

Weiter unten findet sich dann nur noch der Aufruf der JS-Funktion changeCSSFile() aus einem Link heraus, wie schon oben beim Schmetterling beschrieben.

Editor - index.html
    <!-- Stylesheet umschalten
         ===================== -->
      <a href="javascript:changeCSSFile('vorlagen/standard.css', 0);">Style „Standard“</a> /
      <a href="javascript:changeCSSFile('vorlagen/erweitert.css', 0);">Style „Erweitert“</a>

JavaScript

Diese Funktion findet sich in der Datei vorlagen/switchStyle.js. Sie ersetzt die Zeile <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" /> durch <link rel="stylesheet" type="text/css" href="vorlagen/erweitert.css" />.

Zusammenfassung

⇦ Animation / Absätze einblenden ⇨
Nach oben