As I promised before, here’s the full code for changing style sheets, and keeping the change persistent:
<html>
<head>
<title>CHANGING STYLES BY STYLE SHEET</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="default.css" id="default" />
<link rel="alternate" type="text/css"
href="style1.css" id="style1" />
<link rel="alternate" type="text/css"
href="style2.css" id="style2" />
<link rel="alternate" type="text/css"
href="style3.css" id="style3" />
<link rel="alternate" type="text/css"
href="style4.css" id="style4" />
<script language="javascript">
function setStyleSheet(sheetId){
// loop over style sheets and deactivate them
for(var i=0;i<document.styleSheets.length;i++){
document.styleSheets[i].disabled=true;
}
// activate selected style sheet
var sheet=document.getElementById(sheetId);
if(!sheet){return;}
sheet.disabled=false;
// store stylesheet ID value in cookie
document.cookie="style="+sheetId;
}
function makeStyleSwitchers(){
// locate <a> elements in 'stylepanel' element
var as=document.getElementById
('stylepanel').getElementsByTagName('a');
if(!as){return;}
// assign onclick event handlers
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
// set style sheet
setStyleSheet(this.id.replace
(/switcher/,'style'));
}
}
}
// load default style sheet if no cookie is found
document.cookie!=''?setStyleSheet(document.cookie.split
('=')[1]):setStyleSheet('default');
// make style switchers
window.onload=function(){
if(document.getElementById){
makeStyleSwitchers();
}
}
</script>
</head>
<body>
<h1>Page Name</h1>
<div id="stylepanel">
<p>
<a href="#" title="Change Style" id="switcher1">Style
1</a>
<a href="#" title="Change Style" id="switcher2">Style
2</a>
<a href="#" title="Change Style" id="switcher3">Style
3</a>
<a href="#" title="Change Style" id="switcher4">Style
4</a>
</p>
</div>
<div class="content">
<p>Content for div1 goes here...Content for div1 goes
here...Content for div1 goes here...</p>
</div>
<div class="content">
<p>Content for div 2 goes here...Content for div2 goes
here...Content for div2 goes here...</p>
</div>
<div class="content">
<p>Content for div3 goes here...Content for div3 goes
here...Content for div3 goes here...</p>
</div>
</body>
</html>
Whew, that was a pretty long snippet. But look at what we have accomplished: we’ve developed a useful method for changing complete style sheets, and we made it stick across different pages!
In this series, we’ve taken an in-depth look at different methods to change styles in Web pages, starting out with single-element style manipulation to multiple wider style sheet changes, using only client-side techniques. Hopefully this has been an introductory process that will encourage you to expand on the explained methods and incorporate possible improvements to them. Just put your JavaScript background to work and make the big change!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
