Using Persistent Styles with Multiple Style Sheets - Defining some basic JavaScript functions
(Page 4 of 5 )
As I stated in the section that you just read, in order to combine the styles defined by the different persistent sheets that you saw previously, it's necessary to create some simple JavaScript functions. These functions will be tasked with assigning specific classes to the DIVs and paragraphs included into the sample web page that was built earlier.
Based on this premise, I'm going to define these functions in such a way that they allow the user to change individually the look and feel of the mentioned elements via a set of web page links created with the DOM.
So first, here's the signature of the JavaScript function that displays the mentioned links:
function displayStyleLinks(){
var labels=new Array('Red','Green','Blue','Font Size 1','Font
Size 2','Font Size3','Reset Styles');
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);
}
As you can see, the prior "displayStyleLinks()" function is responsible for displaying the list of links that will change the styles of the different DIVs and paragraphs included in the sample web page defined previously, so I believe the logic implemented by it doesn't bear much discussion in this case.
Therefore, let's turn our attention to the signatures of the following functions, which are tasked with assigning different classes to the DIVs and paragraphs contained in the same sample web document built earlier.
These brand new functions look like this:
function changeDivStyle(style){
var divs=document.getElementsByTagName('div');
if(!divs){return};
for(var i=0;i<divs.length;i++){
if(divs[i].className.indexOf('container')!=-1){
divs[i].className='container '+style;
}
}
}
function changeParStyle(style){
var divs=document.getElementsByTagName('div');
if(!divs){return};
for(var i=0;i<divs.length;i++){
if(divs[i].className.indexOf('container')!=-1){
var pars=document.getElementsByTagName('p');
if(!pars){return};
for(var i=0;i<pars.length;i++){
pars[i].className=style;
}
}
}
}
In basic terms, the primary task of all the above JavaScript functions is to assign different CSS classes to the respective web page DIVs and paragraphs. However, things get really interesting when I include these classes into different persistent style sheets, as illustrated below:
(definition for "red.css" file)
.red{
background: #f00;
}
(definition for "green.css" file)
.green{
background: #0f0;
}
(definition for "blue.css" file)
.blue{
background: #00f;
}
(definition for "fontsize1.css" file)
.size1{
font: normal 14pt Arial, Helvetica, sans-serif;
}
(definition for "fontsize2.css" file)
.size2{
font: normal 18pt Arial, Helvetica, sans-serif;
}
(definition for "fontsize3.css" file)
.size3{
font: normal 24pt Arial, Helvetica, sans-serif;
}
Now, having defined the previous persistent style sheets, it's perfectly possible to apply them to the different paragraphs and DIVs of the previous sample web page, in this way achieving a neat visual combination.
How can this be done? Well, the answer is actually simple. By associating the proper JavaScript function to a specific styling link, it's feasible to style DIVs and paragraphs individually, which is demonstrated by the following piece of JavaScript code:
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(){
changeDivStyle('red');
return false;
}
var link2=document.getElementsByTagName('a')[1];
if(!link2){return};
link2.onclick=function(){
changeDivStyle('green');
return false;
}
var link3=document.getElementsByTagName('a')[2];
if(!link3){return};
link3.onclick=function(){
changeDivStyle('blue');
return false;
}
var link4=document.getElementsByTagName('a')[3];
if(!link4){return};
link4.onclick=function(){
changeParStyle('size1');
return false;
}
var link5=document.getElementsByTagName('a')[4];
if(!link5){return};
link5.onclick=function(){
changeParStyle('size2');
return false;
}
var link6=document.getElementsByTagName('a')[5];
if(!link6){return};
link6.onclick=function(){
changeParStyle('size3');
return false;
}
var link7=document.getElementsByTagName('a')[6];
if(!link7){return};
link7.onclick=function(){
changeDivStyle('');
changeParStyle('');
return false;
}
}
}
Now, each time one of the previous web page links is clicked on, different style combinations can be achieved easily for the same web document. Of course, you'll grasp this process better if you look at the following images, which show this combination of styles in action:
See how easy it is to combine the styles defined in different persistent sheets by using a few basic JavaScript functions? I bet you do! Now that you hopefully grasped the logic that drives the approach for utilizing multiple persistent style sheets, it's time to leap forward and list the complete source code that corresponds to this style switching application, so you can see more clearly how its distinct pieces link with each other.
This will be done in the last section of this tutorial, so click on the link that appears below and keep reading.
Next: Listing the full source code of the style switching application >>
More Style Sheets Articles
More By Alejandro Gervasio
