Customizing Styles: User-Controlled Style Sheets, part 1
Giving your visitors more control over how they see your website makes for a very user-friendly experience. If you get a lot of visually impaired Web surfers, you might want to set up a "switcher" to allow them to switch between the default version and a high-contrast version of your website. In this first of a three-part article series, Alejandro Gervasio explains a couple of simple ways to set this up.
Customizing Styles: User-Controlled Style Sheets, part 1 - What's your name? Changing styles by tag name (Page 3 of 5 )
<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.