JavaScript to Swap CSS on XHTML Strict Webpage

Over Easter I was set a task by the HTML sub-module of the Computer Science degree I am doing. Basically, it was to do a critique of an infographic and then present that in the form of two webpages. These webpages both have to have [b]three different style sheets[/b] assigned to them (the same three being on both.) And we have been told the user [b]should be able to swap between each of the three in realtime[/b]. We have been provided with a javascript program to allow this (since we haven't started learning java yet,) however we have not really been told how to implement the change in the [b]XHTML Strict[/b] code.

The following is the javascript code (stylesheets.js) that was provided:

[code] function setActiveStyle (styletitle) {
var stylelist = document.getElementsByTagName("link");
for (i = 0; i < stylelist.length; i++) {
if (isOptionalStylesheet(stylelist[i])) {
activateWhenMatching(stylelist[i], styletitle);

function isOptionalStylesheet(thislink) {
return (thislink.getAttribute("rel").indexOf("style") != -1) && thislink.getAttribute("title")

function activateWhenMatching(thislink, styletitle) {
if (thislink.getAttribute("title") == styletitle) {
thislink.disabled = false;
else {
thislink.disabled = true;

function chooseStyleBySize() {
var theWidth = document.documentElement.clientWidth;
if (theWidth < 800) {
theSheet = "smallsheet";
else if (theWidth < 900) {
theSheet = "mediumsheet";
else {
theSheet = "bigsheet";

So far, I've got this in the head of the webpage:

Critique of an Information Graphic


As you can see, I've chosen to have a permanent style sheet implemented (being the first one of three.)

[b]Would it be possible to make a command button for each stylesheet to run off?[/b] (For example, clicking the "Style Sheet 2" button would enable the second style sheet.)
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!