Customizing Styles: User-Controlled Style Sheets, part 1 - The real style switcher
(Page 5 of 5 )
Let's face it. The example is incomplete without giving users the possibility to alternate the styles of page elements by clicking on the link. Doing so, this element will behave as a real style "switcher" in the document. Fortunately, the CSS code and HTML markup remain the same. So, here's the revamped and final version of the "changeStyle()" function:
<script language="javascript">
changeStyle=function(){
var switcher=document.getElementById('switcher');
if(!switcher){return;}
var divs=document.getElementsByTagName('div');
if(!divs){return;}
// change style
switcher.onclick=function(){
for(var i=0;i<divs.length;i++){
var d=divs[i];
d.className=='default'?d.className='accessible':d.className='default';
}
return false;
}
}
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
</script>
It's pretty clear that the function is nearly the same. I've only modified the section that operates when the user clicks on the switcher link. The script checks to see if the class attribute of each <div> element is "default". If it is, then the class name is changed to "accessible" and vice versa. The following line alternates styles for page elements:
d.className=='default'?d.className='accessible':d.className='default';
In a quick way, I've provided users with a simple but fully functional style switcher. The complete code for the function is the following:
<html>
<head>
<title>CHANGING STYLES BY TAG EXPANDED</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
changeStyle=function(){
var switcher=document.getElementById('switcher');
if(!switcher){return;}
var divs=document.getElementsByTagName('div');
if(!divs){return;}
// change style
switcher.onclick=function(){
for(var i=0;i<divs.length;i++){
var d=divs[i];
d.className=='default'?d.className='accessible':d.className='default';
}
return false;
}
}
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
</script>
<style type="text/css">
.default {
font: normal 12px "Arial", Helvetica, sans-serif;
color: #000;
background: #fff;
margin-bottom: 10px;
}
.accessible {
font: 300% "Arial", Helvetica, sans-serif;
color: #ff0;
background: #000;
}
</style>
</head>
<body>
<p><a href="#" title="Change Style" id="switcher">Change style</a></p>
<div class="default"><p>Content for div 1 goes here...Content for div 1 goes here...</p></div>
<div class="default"><p>Content for div 2 goes here...Content for div 2 goes here...</p></div>
<div class="default"><p>Content for div 3 goes here...Content for div 3 goes here...</p></div>
</body>
</html>
I'm sure you'll agree this final version is better and flexible enough. In its current incarnation, the script is very simplistic, but just by adapting the CSS classes to specific needs, the solution can be implemented on any website that takes into account visitors with impaired sight. Just think about more possible additions. One nice feature might be displaying a different link text each time it's clicked, displaying "Change Style" and "Reset Style" alternatively. I'm sure you'll find your own adaptations and uses.
Bottom line
Well, we're finished for now. In this first part, I've demonstrated with some examples, the different approaches to change styles in page elements. From single style changes, accessing elements by their ID attribute, to multi-element style changes, accessing them by tag name, the processes are equally easy to follow. However, the job is not completely done yet. In the second part of this article, I'll be showing another useful and handy style changing technique: changing complete style sheets. I hope this sounds interesting for you, because the subject is really exciting. Don't miss it!
| 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. |
