Test 1: basic setup (no bugs)

Proceed to test 2: making the box invisible

This test demonstrates the framework for stylesheet switching.

The text in this box will get bigger when you click this link

Explanation

When the page loads, the stylesheet "change.css" is disabled by javascript. Clicking the link re-enables this stylesheet by javascript, and makes the text bigger. The reset link disables "change.css" again

Note that, after clicking the link, you can still scroll the page with your mousewheel or arrow keys.

Source files

Here is the javascript, "style_switch.js":

// This script disables/enables a stylesheet based
// 	on the number of the link tag

var linknum = document.getElementsByTagName('link');

function styleDisable() {  
  linknum[1].disabled = true;  // Disables change.css
}

function change() {   //Enables change.css:
  linknum[1].disabled = false;
}

Here is the main stylesheet, "style.css":

body {
	width: 40em;
	margin: auto;
}

div {
	border: 2px solid black;
	padding: 1em;
	margin: 1em;
	width: 30em;
}

Here is the secondary stylesheet, "change.css":

div#change { font-size: 300%;}

Here is some text to force a scrollbar:

More text

/End