Customizing Styles: User-Controlled Style Sheets, part 1 - Flexible style changes: keeping it maintainable with CSS
(Page 4 of 5 )
Based on the above practical example, it's highly desirable and even recommended to add some CSS declarations, in order to take a more realistic approach and be stricter about the needs that eventually might arise for visitors with impaired sight. According to this concept, I'm going to declare two basic classes: "default" and "accessible" respectively. The first one will be applied to the previous <div> elements when the document is loaded, and the second will be assigned to the page elements, when the user clicks on the switcher link. Now, we're getting a bit more realistic. First, let's present the new "changeStyle()" function:
<script language="javascript">
changeStyle=function(){
var switcher=document.getElementById('switcher');
if(!switcher){return;}
var divs=document.getElementsByTagName('div');
if(!divs){return;}
switcher.onclick=function(){
for(var i=0;i<divs.length;i++){
divs[i].className='accessible';
}
return false;
}
}
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
</script>
Second, as I stated above, let's declare the CSS classes. They're really simple:
<style type="text/css">
.default {
font: normal 12px "Arial", Helvetica, sans-serif;
color: #000;
background: #fff;
}
.accessible {
font: 300% "Arial", Helvetica, sans-serif;
color: #ff0;
background: #000;
}
</style>
Finally, let's show the corresponding HTML markup, which is nearly identical to the previous cases:
<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>
Fine, let's take a deep breath and explain the above code. The "changeStyle()" function closely resembles the original version, with some subtle differences. Since I've declared two CSS classes, once the page is loaded, the script retrieves the already familiar switcher link. When the link is clicked, the function loops over all of the <div> elements in the page, assigning them the new "accessible" class. This changes their styles in a fast and straightforward manner, enlarging the text, and varying the background color and the font size. As you can see, this approach is significantly more flexible, since, by introducing minor modifications in the CSS classes, the style change can become really dramatic. If you think about it, this is one of the biggest advantages of the CSS. Pretty simple, right?
If you feel that the above example is not complete, you're correct. So I'm going to fix that mistake by listing the full code:
<html>
<head>
<title>CHANGING STYLES BY TAG NAME</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;}
switcher.onclick=function(){
for(var i=0;i<divs.length;i++){
divs[i].className='accessible';
}
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;
}
.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>
Just copy and paste the code into your favorite editor. Save it and load it into your browser and see what happens. It's not going to change the way you see the world, but hopefully it will demonstrate how easy multi-element style changes can be achieved. But, wait a minute! What's the sense of changing the style of page elements if we cannot turn them back to their original state? Let's make one last effort and add that functionality to the JavaScript function.
Next: The real style switcher >>
More Style Sheets Articles
More By Alejandro Gervasio
