JavaScript to Swap CSS on XHTML Strict Webpage - Programmers Heaven

Howdy, Stranger!

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


Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

JavaScript to Swap CSS on XHTML Strict Webpage

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