Home arrow Style Sheets arrow Page 5 - 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 - The real style switcher
(Page 5 of 5 )

Let's face it. The example is incomplete without giving users the possibility to alternate the styles of page elements  by clicking on the link. Doing so, this element will behave as a real style "switcher" in the document. Fortunately, the CSS code and HTML markup remain the same. So, here's the revamped and final 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;}

// change style

switcher.onclick=function(){

for(var i=0;i<divs.length;i++){

var d=divs[i];

d.className=='default'?d.className='accessible':d.className='default';

}

return false;

}

}

window.onload=function(){

if(document.getElementById){

changeStyle();

}

}

</script>

It's pretty clear that the function is nearly the same. I've only modified the section that operates when the user clicks on the switcher link. The script checks to see if the class attribute of each <div> element is "default". If it is, then the class name is changed to "accessible" and vice versa. The following line alternates styles for page elements:

d.className=='default'?d.className='accessible':d.className='default';

In a quick way, I've provided users with a simple but fully functional style switcher. The complete code for the function is the following:

<html>

<head>

<title>CHANGING STYLES BY TAG EXPANDED</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

changeStyle=function(){

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

if(!switcher){return;}

var divs=document.getElementsByTagName('div');

if(!divs){return;}

// change style

switcher.onclick=function(){

for(var i=0;i<divs.length;i++){

var d=divs[i];

d.className=='default'?d.className='accessible':d.className='default';

}

return false;

}

}

window.onload=function(){

if(document.getElementById){

changeStyle();

}

}

</script>

<style type="text/css">

.default {

font: normal 12px "Arial", Helvetica, sans-serif;

color: #000;

background: #fff;

margin-bottom: 10px;

}

.accessible {

font: 300% "Arial", Helvetica, sans-serif;

color: #ff0;

background: #000;

}

</style>

</head>

<body>

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

<div class="default"><p>Content for div 1 goes here...Content for div 1 goes here...</p></div>

<div class="default"><p>Content for div 2 goes here...Content for div 2 goes here...</p></div>

<div class="default"><p>Content for div 3 goes here...Content for div 3 goes here...</p></div>

</body>

</html>

I'm sure you'll agree this final version is better and flexible enough. In its current incarnation, the script is very simplistic, but just by adapting the CSS classes to specific needs, the solution can be implemented on any website that takes into account visitors with impaired sight. Just think about more possible additions. One nice feature might be displaying a different link text each time it's clicked, displaying "Change Style" and "Reset Style" alternatively. I'm sure you'll find your own adaptations and uses.

Bottom line

Well, we're finished for now. In this first part, I've demonstrated with some examples, the different approaches to change styles in page elements. From single style changes, accessing elements by their ID attribute, to multi-element style changes, accessing them by tag name, the processes are equally easy to follow. However, the job is not completely done yet. In the second part of this article, I'll be showing another useful and handy style changing technique: changing complete style sheets. I hope this sounds interesting for you, because the subject is really exciting. Don't miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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