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 - There's an ID out there: changing styles by ID (Page 2 of 5 )
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.
// change style
And the HTML markup, which is kept at a very basic level:
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.