Howdy, Stranger!

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


JavaScript to Swap CSS on XHTML Strict Webpage

Uni_GitUni_Git Member Posts: 2
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.