DOM Style Objects
The styleSheets property of the document object contains an array of all the stylesheets on the page, whether they are contained in external files and linked into the page head, or declared between <style> and </style> tags in the page head. The items in the styleSheets array are indexed numerically, starting at zero for the stylesheet appearing first.
You can access the total number of spreadsheets on your page by usingdocument.styleSheets.length
Enabling, Disabling, and Switching Stylesheets
Each stylesheet in the array has a property called disabled, containing a value of Boolean true or false. This is a read/write property, so we are able to effectively switch individual stylesheets on and off in JavaScript:
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
The preceding code snippet “switches on” the second stylesheet in the page (index 1) while “switching off” the first stylesheet (index 0).
Below code has a working example. The script on this page first declares the variable whichSheet, initializing its value at zero:
var whichSheet = 0;
This variable keeps track of which of the two stylesheets is currently active. The second line of code initially disables the second of the two stylesheets on the page:
document.styleSheets[1].disabled = true;
The function sheet(), which is attached to the onClick event handler to the button on the page when the page loads, carries out three tasks when the button is clicked:
- Disable the stylesheet whose index is stored in variable whichSheet:
document.styleSheets[whichSheet].disabled = true;
- Toggle variable whichSheet between one and zero:
whichSheet = (whichSheet == 1) ? 0 : 1;
- Enable the stylesheet corresponding to the new value of whichSheet:
document.styleSheets[whichSheet].disabled = false;
The combined effect of these activities is to toggle between the two active stylesheets for the page. The script is shown in action like this.
<!DOCTYPE html>
<html>
<head>
<title>Switching Stylesheets with JavaScript</title>
<style>
body {
background-color: white;
color: red;
font: normal 24px arial, helvetica, sans-serif;
padding: 20px;
}
</style>
<style>
body {
background-color: black;
color: yellow;
font: italic bold 24px "Times New Roman", serif;
padding: 20px;
}
</style>
<script>
var whichSheet = 0;
document.styleSheets[1].disabled = true;
function sheet() {
document.styleSheets[whichSheet].disabled = true;
whichSheet = (whichSheet == 1) ? 0 : 1;
document.styleSheets[whichSheet].disabled = false;
}
window.onload = function() {
document.getElementById("btn1").onclick = sheet;
}
</script>
</head>
<body>
Switch my stylesheet with the button below!<br />
<input type="button" id="btn1" value="Toggle" />
</body>
</html>
Try it Yourself: Selecting a Particular Stylesheet
Having your stylesheets indexed by number doesn’t make it easy to select the stylesheet you need. It would be easier if you had a function to allow you to title your stylesheets and select them by their title attribute.
You need your function to respond in a useful manner if you ask for a stylesheet that doesn’t exist; you want it to maintain the previous stylesheet and send the user a message.
First, declare a couple of variables and initialize their values:
var change = false;
var oldSheet = 0;
The Boolean variable change keeps track of whether you’ve found a stylesheet with the requested name; once you do so, you change its value to true, indicating that you intend to change stylesheets.
The integer oldSheet, originally set to zero, will eventually be assigned the number of the currently active sheet; in case you don’t find a new stylesheet matching the requested title, you set this back to active before returning from the function.
Now you need to cycle through the styleSheets array:
for (var i = 0; i < document.styleSheets.length; i++) { ...}
For each stylesheet:
If you find that this is the currently active stylesheet, store its index in the variable oldSheet:
if(document.styleSheets[i].disabled == false) {
oldSheet = i;
}
As you cycle through, make sure all sheets are disabled:
document.styleSheets[i].disabled = true;
If the current sheet has the title of the requested sheet, make it enabled by setting its disabled value to false, and immediately set your variable change to true:
if(document.styleSheets[i].title == mySheet) {
document.styleSheets[i].disabled = false;
change = true;
}
When you’ve cycled through all sheets, you can determine from the state of the variables change and oldSheet whether you are in a position to change the stylesheet. If not, reset the prior stylesheet to be enabled again:
if(!change) document.styleSheets[oldSheet].disabled = false;
Finally, the function returns the value of variable change—true if the change has been made, or false if not.
The code is! Save this code in an HTML file and load it into your browser.
<!DOCTYPE html>
<html>
<head>
<title>Switching stylesheets with JavaScript</title>
<style title="sheet1">
body {
background-color: white;
color: red;
}
</style>
<style title="sheet2">
body {
background-color: black;
color: yellow;
}
</style>
<style title="sheet3">
body {
background-color: pink;
color: green;
}
</style>
<script>
function ssEnable(mySheet) {
var change = false;
var oldSheet = 0;
for (var i = 0; i < document.styleSheets.length; i++) {
if(document.styleSheets[i].disabled == false) {
oldSheet = i;
}
document.styleSheets[i].disabled = true;
if(document.styleSheets[i].title == mySheet) {
document.styleSheets[i].disabled = false;
change = true;
}
}
if(!change) document.styleSheets[oldSheet].disabled = false;
return change;
}
function sheet() {
var sheetName = prompt("Stylesheet Name?");
if(!ssEnable(sheetName)) alert("Not found - original
stylesheet retained.");
}
window.onload = function() {
document.getElementById("btn1").onclick = sheet;
}
</script>
</head>
<body>
Switch my stylesheet with the button below!<br />
<input type="button" id="btn1" value="Change Sheet" />
</body>
</html>
The small function sheet() is added to the button’s onClick event handler when the page loads. Each time the button is clicked, sheet() prompts the user for the name of a stylesheet
var sheetName = prompt("Stylesheet Name?");
Then it calls the ssEnable() function, passing the requested name as an argument.
If the function returns false, indicating that no change of stylesheet has taken place, you alert the user with a message:
if(!ssEnable(sheetName)) alert("Not found - original stylesheet retained.");
The script is shown operating below
