Related items

An Introduction to Cascading Style Sheets

Dynamic StyleSheets- source

You are here: irt.org | Articles | Cascading Style Sheets (CSS) | Dynamic StyleSheets [ previous next ]

Published on: Saturday 28th February 1998 By: Michael Bednarek

custom.htm

<HEAD>
<TITLE>Customise page</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="library.js"></SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript1.2"><!--
if (document.styleSheets || document.layers) {
    document.write('<P>Please browse available styles using the box below, and confirm your choice by pressing the OK button.');
    document.write('<FORM>');
    document.write('<SELECT NAME="style" onChange="changeSheet(this.selectedIndex)">');
    document.write('<OPTION>Style 1<\/OPTION>');
    document.write('<OPTION>Style 2<\/OPTION>');
    document.write('<OPTION>Style 3<\/OPTION>');
    document.write('<\/SELECT>');
    document.write('<INPUT TYPE="BUTTON" VALUE="OK" onClick="Set_Cookie(\'stylesheet\',mySheet,expires)">');
    document.write('<\/FORM>');

    if (document.styleSheets) {
        document.write('<H1>Headings will appear like this.<\/H1>');
        document.write('<P><A HREF="javascript:alert(\'just testing\')">Links will appear like this.<\/A>');
        document.write('<P><CODE>Any quoted code will appear like this.<\/CODE><BR>');
    }
    else if (document.layers) {
        document.write('<LAYER SRC="style1.htm" NAME="style1" VISIBILITY="show"><\/LAYER>');
        document.write('<LAYER SRC="style2.htm" NAME="style2" VISIBILITY="hide"><\/LAYER>');
        document.write('<ILAYER SRC="style3.htm" NAME="style3" VISIBILITY="hide"><\/ILAYER>');
    }

    checkStyle();
}
//--></SCRIPT>

<P>Once you've stored a cookie try out the style sheet on the <A HREF="test.htm">next page</A>.

<P><A HREF="index.htm">return</A>

</BODY>
</HTML>

Return

test.htm

<HTML>
<HEAD>
<TITLE>Test page</TITLE>

<SCRIPT LANGUAGE="JavaScript1.2" SRC="library.js"></SCRIPT>

</HEAD>

<BODY>

<H1>This is the test page</H1>

<P>Return to the <A HREF="custom.htm">custom page</A> or return to the <A HREF="index.htm">article</A>

<P><CODE>"Too many cooks spoil the broth"</CODE><BR>

</BODY>
</HTML>

Return

style1.htm

<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style1.css" TYPE="text/css">
</HEAD>

<BODY>

<H1>Headings will appear like this.</H1>

<P><A HREF="javascript:alert('just testing')">Links will appear like this.</A>

<P><CODE>Any quoted code will appear like this.</CODE><BR>

</BODY>
</HTML>

Return

style1.css

A {text-decoration:none;color:blue;font-weight:normal}
H1 {font-family:Arial;font-weight:normal;font-size:16pt}
CODE {font-family:Verdana;font-style:normal;color:black}

Return

style2.htm

<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style2.css" TYPE="text/css">
</HEAD>

<BODY>

<H1>Headings will appear like this.</H1>

<P><A HREF="javascript:alert('just testing')">Links will appear like this.</A>

<P><CODE>Any quoted code will appear like this.</CODE><BR>

</BODY>
</HTML>

Return

style2.css

A {text-decoration:none;color:red;font-weight:bold}
H1 {font-family:Arial;font-weight:bold;font-size:36pt}
CODE {font-family:Verdana;font-style:italic;color:blue}

Return

style3.htm

<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style3.css" TYPE="text/css">
</HEAD>

<BODY>

<H1>Headings will appear like this.</H1>

<P><A HREF="javascript:alert('just testing')">Links will appear like this.</A>

<P><CODE>Any quoted code will appear like this.</CODE><BR>

</BODY>
</HTML>

Return

style3.css

A {text-decoration:none;color:green;font-weight:bold;font-size:14pt}
H1 {font-family:Sans Serif;font-size:48pt;text-decoration:underline}
CODE {font-family:Verdana;font-style:italic;color:white;background:blue}

Return

library.js

function Get_Cookie(name) {
    var start = document.cookie.indexOf(name+"=");
    var len = start+name.length+1;
    if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
    if (start == -1) return null;
    var end = document.cookie.indexOf(";",len);
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len,end));
}

function Set_Cookie(name,value,expires,path,domain,secure) {
    document.cookie = name + "=" +escape(value) +
        ( (expires) ? ";expires=" + expires.toGMTString() : "") +
        ( (path) ? ";path=" + path : "") + 
        ( (domain) ? ";domain=" + domain : "") +
        ( (secure) ? ";secure" : "");
}

var expires = new Date();
expires.setTime(expires.getTime() + (365 * 24 * 60 * 60 * 1000 * 365));

mySheet = Get_Cookie('stylesheet');

if (mySheet != null)
    document.write('<LINK REL="stylesheet" HREF="' + mySheet + '.css">');
else
    document.write('<LINK REL="stylesheet" HREF="style1.css">');

function checkStyle() {
    if (mySheet != null) {
        if (document.styleSheets)
            document.styleSheets[0].href = mySheet + '.css';
        else if (document.layers) {
            document.layers['style1'].visibility = 'hide';
            document.layers['style2'].visibility = 'hide';
            document.layers['style3'].visibility = 'hide';
            document.layers[mySheet].visibility = 'show';
        }
    }
}

function changeSheet(choice) {
    if (choice == 0) mySheet = 'style1';
    if (choice == 1) mySheet = 'style2';
    if (choice == 2) mySheet = 'style3';

    if (document.styleSheets)
        document.styleSheets[0].href = mySheet + '.css';
    else if (document.layers) {
        document.layers['style1'].visibility = 'hide';
        document.layers['style2'].visibility = 'hide';
        document.layers['style3'].visibility = 'hide';
        document.layers[mySheet].visibility = 'show';
    }
}

Related items

Why use CSS?

An Introduction to Cascading Style Sheets