• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dynamisches Stylesheet mit Nodes

Status
Für weitere Antworten geschlossen.
J

JensB

Neues Mitglied
Hallo ihr,

ich möchte gerne alternative Designs auf meiner HP anbieten, ein normales, und ein etwas verspielteres. Bei meiner Recherche bin ich auf diesen selfHTML-Foreneintrag gestoßen:

SELFHTML Forumsarchiv / 2007 / Januar / Design per Dropdown auswählen.

Meine beiden Stylesheets heißen style1.css und style2.css, darin ist jeweils aus Testzwecken h1 auf rot bzw. auf grün gesetzt, und die HTML-Datei besteht auch nur aus einem <h1> und einem Link zur javascript:aendern();

Ich habe mir folgendes Skript geschrieben:

Code: 
function aendern () { 
 
   // Stylesheet-Eintrag entfernen 
   var child = document.getElementsByTagName("head")[0].lastChild; 
   dummy = document.getElementsByTagName("head")[0].removeChild(child); 
 
   // neues <link> erzeugen 
   var myLink = document.createElement("link"); 
 
   // Attribute erstellen 
   // <link rel="" href="" type=""> 
 
   var myLink_rel   = document.createAttribute("rel"); 
   myLink_rel.nodeValue  = "stylesheet"; 
 
   var myLink_type = document.createAttribute("type"); 
   myLink_type.nodeValue = "text/css"; 
 
   var myLink_href = document.createAttribute("href"); 
   myLink_href.nodeValue = "style2.css"; 
    
   // Attribute hinzufügen    
   myLink.setAttributeNode(myLink_rel); 
   myLink.setAttributeNode(myLink_type); 
   myLink.setAttributeNode(myLink_href); 
 
   // Das Element wieder hinzufügen 
   document.getElementsByTagName("head")[0].appendChild(myLink); 
 
}
Aber das funktioniert nicht... Obwohl es genau so ist, wie in den Beispielen auf Selfhtml.. Was ist falsch?

Gruß
Jens

/edit: Jetzt läuft es. Tja, so eine Fehlerkonsole von Firefox ist schon was wert, wenn man weiß, wo man sie findet :roll:

Ich lass den Code mal hier stehen, der obige funktioniert jetzt, aber nur, wenn das Stylesheet der letzte Eintrag im <head> ist. Wie kann man das variabel gestalten?
 
Zuletzt bearbeitet:
Nein, mit variabel meinte ich die Stelle, an der das Stylesheet im Header steht. Denn es ist ja nicht *immer* der lastChild. Daher.

Gruß
Jens
 
Bette deine alternativen Stylesheet mittels rel="alternate stylesheet" ein und entferne nur entsprechend das "alternate".

document.styleSheets ist dabei ziemlich hilfreich.
 
Das heißt ich hätte mir das Node-Gewusel sparen können?

Wie es aussieht, ist es vollkommen egal, an welcher Stelle das <link> zum Stylesheet steht - es funktioniert so oder so tadellos.

Aus Interesse: Wo genau gibt's ne gute Dokumentation zu documents.styleSheets? Bei selfHTML ist da nichts zu finden :? daher kenne ich es auch nicht.
 
Na super, hätte ich das vorher gewusst. In zukünftigen projekten werde ich auf jeden Fall das im Hinterkopf behalten.

Aber die XML-Node-Variante ist eigentlich besser, oder?
 
Warum? Wenn du ein <link /> hinzufügen möchtest ja, aber du willst ja eigentlich nur vorhandene Sheets (de-)aktivieren.
 
Aus HTML-DOM-Sicht ist es umständlich.
Man hätte das ganze mit getElementByTagName("link") (und evtl. "style") portabler gestalten können. Attribute setzt man lieber gleich über das HTML-DOM-Interface:
Code: 
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "foo.css";
link.media = "screen";
 
Das kann nicht sein, so einfach geht das? Naja, gebracht hat mir das Node-Gewusel aber auch was, selbst wenn ich in Zukunft lieber dein Script verwende. :)

Danke.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben