Customizing Styles: User-Controlled Style Sheets, part 1

Before I go deep into exposing any source code, let's face a key question that always come up when trying to implement some kind of style controls in Web pages: why mess up things with proprietary solutions coming from us when browsers already have their own tools to zoom in and zoom out text, and even alternate or remove styles from documents? The answer is straightforward: plenty of style variations means more choices for users. Not all browsers will give that detailed high-contrast page that a visitor may need for proper reading, or users may find that browser text zooms are not powerful enough. What's more, users can find it helpful to change page styles without having to take a look at browser controls, which sometimes may be harder to use.

Having answered that question, the road is open to introduce ourselves to the first approach to changing styles in Web pages: changing style elements by ID. Let's see how it can be easily achieved.

In order to change the style of a specific page element, the basic approach consists of getting the element's ID attribute and altering the style dynamically, setting some new properties for it. This simple technique might be implemented with a few lines of JavaScript and simple markup. First, the JavaScript function:

<script language="javascript">

changeStyle=function(){

var switcher=document.getElementById('switcher');

if(!switcher){return;}

var content=document.getElementById('content');

if(!content){return;}

// change style

switcher.onclick=function(){

content.style.backgroundColor='#000';

content.style.color='#ff0';

content.style.fontSize='300%';

return false;

}

}

window.onload=function(){

if(document.getElementById){

changeStyle();

}

}

</script>

And the HTML markup, which is kept at a very basic level:

<div><p><a href="#" title="change style" id="switcher">Change style</a></p></div>

<div id="content"><p>Content goes here...Content goes here...Content goes here...</p></div>

In the above example, I've defined two basic <div> elements. The first one contains the link that behaves as a style switcher for the next containing <div>, identified as "content." Once the page is loaded, the "changeStyle()" function is called properly. This function simply retrieves each <div> object using their ID attributes, and changes the style for the "content" <div> when the link is clicked. As you can see, I've decided to vary background color, increment the font size to a magnitude of "300%", and finally alter the font color of the object.

The "getElementById()" DOM method makes the task of changing the style of an individual page element a straightforward process, doesn't it? However, this rough approach is quite useless in practice for larger style changes, since I'm accessing only one page element at a time, and varying its style. Besides, in real situations, it's rather inefficient to wrap the whole page content into a single <div>. As a final result, this method will be potentially handy when only used on a limited scale, where change styles are needed for small sections of Web pages.

On the other hand, if I want to change large page sections with minor effort, I need to look at another interesting technique: accessing elements by tag name. Once again, DOM's methods are the perfect partners for achieving the objective. Yes, I know you're pretty familiar with the "getElementsByTagName()" method. But maybe someone is unaware of its existence! Let's have a look at its implementation for changing element styles.