Customizing Styles: User-Controlled Style Sheets, part 1 - What's your name? Changing styles by tag name
(Page 3 of 5 )
As I get older, I make fewer efforts to change things. In fact, I'm a little lazy about that now. So, the same principle should be applied to changing styles for page elements. If I really need to affect multiple objects with different styles, accessing elements by their tag name is one of the quickest ways to do it. Accordingly, I've set up a new JavaScript function to perform the style change in a very simple manner. Here's the rewritten 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;}
switcher.onclick=function(){
for(var i=0;i<divs.length;i++){
var d=divs[i];
d.style.backgroundColor='#000';
d.style.color='#ff0';
d.style.fontSize='300%';
}
return false;
}
}
window.onload=function(){
if(document.getElementById){
changeStyle();
}
}
</script>
Finally, here's the list for the HTML code:
<p><a href="#" title="change style" id="switcher">Change style</a></p>
<div><p>Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...</p></div>
<div><p>Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...</p></div>
So far, this version of the script isn't very different from our earlier ID-based approach. However, let's see the logic behind the function to understand what it does. First, the script catches the style switcher element, in a similar way to the first ID-based example. Next, it loops over all of the <div> elements present in the document, using the powerful "getElementsByTagName()" method. This way, a collection of <div> objects is generated, to be easily manipulated. With such as useful structure, changing styles is truly simple. When the switcher link is clicked, the event fires up a function that iterates over all of the <div> elements and changes their styles accordingly, specifying background color, font size and font color, respectively. Lastly, as usual, the whole function is executed when the page finishes loading.
Please notice that the markup is defined only with two <div> containers, which are wrapping up simple paragraphs. However, if I had change my mind about adding many divs to the original HTML, the style change would be immediately applied to them, as soon as the link was clicked again. Here, the power of this technique is clearly evident, since style changes are performed on numerous page elements at the same time.
At this point, I've played around by changing styles that are assigned inside the JavaScript function itself, allowing little variations to play with, unless the code is specifically modified. Surely, the guys at the maintenance department are complaining loudly. So, it's time to make more room in this place, by adding a few CSS rules to the previous example and making it more flexible and maintainable.
Next: Flexible style changes: keeping it maintainable with CSS >>
More Style Sheets Articles
More By Alejandro Gervasio
