Home arrow Style Sheets arrow Page 3 - Working with Multiple Style Sheets
STYLE SHEETS

Working with Multiple Style Sheets


As the Web evolves steadily, more and more sites are providing their visitors with different mechanisms for customizing their surfing experience. Nowadays, it's quite common to visit a web site that allows users to change background and foreground colors of specific sections of that site, alter the size of the font, or even modify the position of certain elements by implementing "draggable" user interfaces.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
September 11, 2007
TABLE OF CONTENTS:
  1. · Working with Multiple Style Sheets
  2. · Working with alternate style sheets
  3. · Switching alternate style sheets in a cross-browser fashion: defining a basic JavaScript function
  4. · Swapping alternate style sheets

print this article
SEARCH DEVARTICLES

Working with Multiple Style Sheets - Switching alternate style sheets in a cross-browser fashion: defining a basic JavaScript function
(Page 3 of 4 )

As you learned in the previous section, all of the alternate style sheets attached to a given web document have a "title" attribute that identifies them. So I'm going to use that attribute to create a simple JavaScript function that allows the user to activate programmatically only one of these sheets.

Basically, the signature for this JavaScript function looks like this:

function changeStyleSheet(title){
   var lnks=document.getElementsByTagName("link");
   if(!lnks){return};
   for(var i=0;i<lnks.length;i++){
      if(lnks[i].getAttribute("rel").indexOf("style")!=-1&&lnks
[i].getAttribute('title')){
         lnks[i].disabled=true;
         if(lnks[i].getAttribute('title')==title){
            lnks[i].disabled = false; 
         }
      }
   }
}

As shown previously, the above "changeStyleSheet()" function implements a simple mechanism for activating/deactivating a specific alternate style sheet directly from the site's own web page. The function accepts the title of the style sheet to be enabled, and then disables the others via the "disabled" property.

Indeed, the process for swapping alternate style sheets is pretty straightforward and you shouldn't have much problem grasping how it works, so next I will define another JavaScript function that will display some links on the browser for calling the previous "changeStyleSheet()" function to activate a specific style sheet.

This brand new function is defined as follows:

function displayStyleLinks(){
   var labels=new Array('Red','Green','Blue','Font Size 1','Font
Size 2','Font Size3');
   var div=document.createElement('div');
   div.setAttribute('id','linkcontainer');
   for(var i=0;i<labels.length;i++){
      var lnk=document.createElement('a');
      lnk.setAttribute('href','#');
      lnk.setAttribute('title',labels[i]);
      lnk.appendChild(document.createTextNode(labels[i]));
      div.appendChild(lnk);
   }
   document.getElementsByTagName('body')[0].appendChild(div);
}

The above JavaScript function doesn't bear mush discussion here. It performs a few basic tasks, like including some simple links via some DOM scripting. These links activate specific alternate style sheets when the user clicks on them. 

And finally, the following JavaScript snippet attaches the "changeStyleSheet()" function to all of the links just created:

window.onload=function(){
   if(document.getElementById && document.createElement &&
document.getElementsByTagName){
      // display style links on the browser
      displayStyleLinks();
      var link1=document.getElementsByTagName('a')[0];
      if(!link1){return};
      link1.onclick=function(){
         changeStyleSheet('redstyle');
         return false;
      }
      var link2=document.getElementsByTagName('a')[1];
      if(!link2){return};
      link2.onclick=function(){
         changeStyleSheet('greenstyle');
         return false;
      }
      var link3=document.getElementsByTagName('a')[2];
      if(!link3){return};
      link3.onclick=function(){
         changeStyleSheet('bluestyle');
         return false;
      }
      var link4=document.getElementsByTagName('a')[3];
      if(!link4){return};
      link4.onclick=function(){
         changeStyleSheet('fontstylea');
         return false;
      }
      var link5=document.getElementsByTagName('a')[4];
      if(!link5){return};
      link5.onclick=function(){
         changeStyleSheet('fontstyleb');
         return false;
      }
      var link6=document.getElementsByTagName('a')[5];
      if(!link6){return};
      link6.onclick=function(){
         changeStyleSheet('fontstylec');
         return false;
      }
   }
}

So far, so good, right? At this stage I developed a simple JavaScript routine to swap several alternate style sheets by using links. But you probably want to see a concrete example that shows how to do this.

Therefore, in the section to come I'll be setting up a practical example where a group of alternate style sheets are switched by using the JavaScript functions that you learned before. So click on the link below and keep reading, to see how this process will be performed.


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