Styles mit Javascript ändern

Cascading Stylesheets bieten (CSS) eine schnelle und einfache Weise an das Erscheinungsbild von Dokumenten in einer Markupsprache geschrieben. CSS-Stile werden auf Webseiten in HTML oder XHTML geschrieben am häufigsten angewendet. Mit dem Einsatz von JavaScript und einen hyper-Link können Webautoren Websitebesucher, einfach ein alternatives Stylesheet zu laden. Dieses zweite Blatt kann verwendet werden, um hilfreiche Darstellung ändert, z. B. größere Kontrast zwischen Vorder-und Hintergrundfarben oder erhöhte Schriftgrößen bereitzustellen.

Anweisungen

1 Formatvorlage Blatt Verweise auf Ihre Web-Seite-Header hinzufügen. Den beiden Stylesheets müssen durch Ihre Webseite geladen werden, bevor sie eingeschaltet werden können. Kopieren Sie und fügen Sie den folgenden Code zwischen den < Head >-Tags der Seite:

< link Rel = "Stylesheet" href="one.css" Type = "Text/Css" Title = "eins" >< link Rel = "alternate Stylesheet" href="two.css" Type = "Text/Css" Title = "zwei" >

Ersetzen Sie die Beispiel-Dateinamen mit dem tatsächlichen Namen und Positionen der zwei Stylesheets.

2 Fügen Sie JavaScript zur Steuerung Stil umschalten. Der Code unten, vorgesehenen öffentlichen Gebrauch von thesitewizard.com, erfüllt zwei Funktionen: aus einem Stylesheet zu einer anderen wechseln und setzen eines Cookies auf dem Benutzercomputer zu gewährleisten das korrekte Stylesheet lädt auf jeder Webseite, die sie besuchen. Erstellen Sie eine Leerzeile zwischen den < Head >-Tags Ihres Dokuments, dann kopieren Sie und fügen Sie den folgenden Code auf diese Zeile:

< Skript-Typ = "Text/Javascript" >Var Style_cookie_name = "Stil";Var Style_cookie_duration = 30;Funktion Switch_style (Css_title){Sie können dieses Skript auf Ihrer Website kostenlos zur Verfügung gestelltSie tun nicht entfernte diese Ankündigung oder die URL unten. Skript vonhttp://www.thesitewizard.com/Javascripts/Change-Style-Sheets.shtmlVar i, Link_tag;für (ich = 0, Link_tag = document.getElementsByTagName("link");

i < link_tag.length ; i++ ) { if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) { link_tag[i].disabled = true ; if (link_tag[i].title == css_title) { link_tag[i].disabled = false ; } } set_cookie( style_cookie_name, css_title, style_cookie_duration );

}}Funktion set_style_from_cookie(){Var Css_title = Get_cookie (Style_cookie_name);Wenn (css_title.length) {}

switch_style( css_title );

}}Funktion Set_cookie (Cookie_name, Cookie_value,

lifespan_in_days, valid_domain )

{

// http://www.thesitewizard.com/javascripts/cookies.shtml var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ; document.cookie = cookie_name + "=" + encodeURIComponent( cookie_value ) + "; max-age=" + 60 * 60 * 24 * lifespan_in_days + "; path=/" + domain_string ;

}Funktion Get_cookie (Cookie_name){

// http://www.thesitewizard.com/javascripts/cookies.shtml var cookie_string = document.cookie ; if (cookie_string.length != 0) { var cookie_value = cookie_string.match ( '(^|;)[\s]*' + cookie_name + '=([^;]*)' ); return decodeURIComponent ( cookie_value[2] ) ; } return '' ;

}< / script >

3 Das Body-Tag einen auf Last-Befehl hinzufügen. Suchen Sie das Starttag < Körper > Code Ihrer Seite. Ersetzen Sie das Tag mit dem folgenden Code:

< onload="set_style_from_cookie() Körper" >

4 Fügen Sie Stil wechseln Links hinzu. Nun, da die Stylesheets und JavaScript vorhanden sind, erstellen Sie die Links, die die switching-Funktion aufrufen. Diese Links sollten im folgenden Format kodiert werden:

< a href="javascript:void(0);" Onclick = "Switch_style ('eins'); returnfalse;" Name = "Thema" Id = "eins" > Stylesheet eine </a >

< a href="javascript:void(0);" Onclick = "Switch_style ('zwei'); returnfalse;" Name = "Thema" Id = "zwei" > Stylesheet zwei </a >

Platzieren Sie diese Links Position die Stylesheet-switching-Steuerelemente zu suchen. Speichern Sie die Seite und in Ihrem Browser eine Vorschau. Den ersten Link wird Ihre ursprüngliche Stylesheet geladen, während die zweite Klick die Alternative lädt.