Home arrow Style Sheets arrow Page 3 - Customizing Styles: User-Controlled Style Sheets, part 1
STYLE SHEETS

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 17
April 06, 2005
TABLE OF CONTENTS:
  1. · Customizing Styles: User-Controlled Style Sheets, part 1
  2. · There's an ID out there: changing styles by ID
  3. · What's your name? Changing styles by tag name
  4. · Flexible style changes: keeping it maintainable with CSS
  5. · The real style switcher

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials