I built the stylesheet changer, over 6 years ago, primarily to cycle through a handful of stylesheets in order to give the user some freedom to customize the site environment easily. I also, from day to day, like to change things up a bit especially when working on the same site (like this portfolio) often.
The changer will ignore stylesheets that are inline (don’t have a href value) and by manipulating the sheetPattern you may filter out other linked sheets. To remember and load your last enabled stylesheet on page load you’ll want to add changeSheets(‘set’,”); to your onload event like I’ve done below. Also, I’ve added it on the double click event in the example so to use it otherwise you may want to remove that.
Below I’ve given the html, event and full function.
Show the code
<link rel="stylesheet" type="text/css" media="screen" href="/css/style2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<script>
onload=function () {changeSheets();}
document.ondblclick=function () {changeSheets();}
function changeSheets() {
function jitter() { window.scrollTo(0,10); window.scrollTo(0,0); }
//limit style sheets considered to this pattern,
//default pattern: '/\/css\/[^.\/]+\.css/i' only considers sheets
//with a href pointing to files in a directory called 'css'
sheetPattern = /\/css\/[^.\/]+\.css/i;
rsheets = new Array(); var rs=0;
sheets = document.styleSheets;
if(sheets){
for (var i=0;i<sheets.length;i++) {
//since there can be many different style sheets we build another array
//with only the sheets we want to enable/disable or cycle through using this function
if (sheets[i].href&&sheets[i].href.search(sheetPattern) != -1) rsheets[rs++] = sheets[i];
}
if (rsheets.length > 0) {
var sheetCount = rsheets.length;
if (typeof sheet != 'number'||sheet >= sheetCount-1) sheet=false;
for (var i=0;i<sheetCount;i++) {
if (typeof this.loaded == 'boolean') {
if (rsheets[i].disabled == false) {
rsheets[i].disabled = true;
//if there is a sheet in the array one key higher, let's enable it
//otherwise loop back to the first sheet
if (sheetCount > i+1) sheetNumber = i+1;
else sheetNumber = 0;
//if a specific sheet has been selected let's enable that one
if (sheet) sheetNumber = sheet;
//if the selected sheet is the one we're on and it's disabled, enable it and quit
if ((!sheet||sheetNumber == sheet)&&rsheets[sheetNumber].disabled == true) {
rsheets[sheetNumber].disabled = false;
setCookie("stylesheet",sheetNumber);
location.reload();
return;
}
}
}
if (typeof this.loaded == 'undefined') {
//this action initializes the sheets we can play with (rsheets)
//disables all sheets unless it's already been stored in a cookie
if (getCookie("stylesheet")&&getCookie("stylesheet") == i) { rsheets[i].disabled = false; jitter();}
else {rsheets[i].disabled = true;}
}
}
this.loaded = true;
//if cookies aren't enabled or we haven't set one yet, make sure a sheet is enabled.
//pick the last one loaded into rsheets
if (!getCookie("stylesheet")) { rsheets[sheetCount-1].disabled = false; setCookie("stylesheet",sheetCount-1); jitter();}
}
}
}
</script>
