Modifying the Look and Feel of Individual Elements with Multiple Style Sheets - Changing the style of DIVs and paragraphs
(Page 4 of 4 )
As you'll possibly recall from the section that you just read, to change the individual appearance of the DIV and the paragraph included in the sample web document that I built earlier, it's necessary to define a JavaScript function that can swap the CSS classes assigned to the web page elements via the group of links located at the bottom of the document in question.
Thus, considering this prerequisite, below I included the signature of this brand new function. It is called "changeStyle()," and it takes as input arguments the ID of the element to be styled along with the class name that will be assigned to it.
The complete JavaScript code that performs this style switching process is listed below:
function changeStyle(id,style){
var elem=document.getElementById(id);
if(!elem){return};
elem.className=style;
}
window.onload=function(){
var link1=document.getElementsByTagName('a')[0];
if(!link1){return};
link1.onclick=function(){
changeStyle('content','red');
return false;
}
var link2=document.getElementsByTagName('a')[1];
if(!link2){return};
link2.onclick=function(){
changeStyle('content','green');
return false;
}
var link3=document.getElementsByTagName('a')[2];
if(!link3){return};
link3.onclick=function(){
changeStyle('content','blue');
return false;
}
var link4=document.getElementsByTagName('a')[3];
if(!link4){return};
link4.onclick=function(){
changeStyle('par','size1');
return false;
}
var link5=document.getElementsByTagName('a')[4];
if(!link5){return};
link5.onclick=function(){
changeStyle('par','size2');
return false;
}
var link6=document.getElementsByTagName('a')[5];
if(!link6){return};
link6.onclick=function(){
changeStyle('par','size3');
return false;
}
var link7=document.getElementsByTagName('a')[6];
if(!link7){return};
link7.onclick=function(){
changeStyle('content','');
changeStyle('par','');
return false;
}
}
If you analyze in detail the previous JavaScript code, then certainly you'll realize that it performs a few simple tasks. These include assigning the "changeStyle()" function to the links displayed in the bottom of the pertinent web page, and swapping the CSS classes attached to the DIV and the paragraph when these links are clicked on.
Expressed in other terms, I implemented a basic style switching application that also uses multiple persistent style sheets, but in this case the sheets in question are not swapped. Of course, the previous example demonstrates how to modify the visual appearance of only two web page elements, but it can be easily extended to work with many more.
And finally, in case you want to see the full source code of this raw style swapping application, here it is:
(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;
}
(definition for "sample_web_page.htm" file)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Multiple style sheets</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" href="red.css" />
<link rel="stylesheet" type="text/css" href="green.css" />
<link rel="stylesheet" type="text/css" href="blue.css" />
<link rel="stylesheet" type="text/css" href="fontsize1.css" />
<link rel="stylesheet" type="text/css" href="fontsize2.css" />
<link rel="stylesheet" type="text/css" href="fontsize3.css" />
<script>
function changeStyle(id,style){
var elem=document.getElementById(id);
if(!elem){return};
elem.className=style;
}
window.onload=function(){
var link1=document.getElementsByTagName('a')[0];
if(!link1){return};
link1.onclick=function(){
changeStyle('content','red');
return false;
}
var link2=document.getElementsByTagName('a')[1];
if(!link2){return};
link2.onclick=function(){
changeStyle('content','green');
return false;
}
var link3=document.getElementsByTagName('a')[2];
if(!link3){return};
link3.onclick=function(){
changeStyle('content','blue');
return false;
}
var link4=document.getElementsByTagName('a')[3];
if(!link4){return};
link4.onclick=function(){
changeStyle('par','size1');
return false;
}
var link5=document.getElementsByTagName('a')[4];
if(!link5){return};
link5.onclick=function(){
changeStyle('par','size2');
return false;
}
var link6=document.getElementsByTagName('a')[5];
if(!link6){return};
link6.onclick=function(){
changeStyle('par','size3');
return false;
}
var link7=document.getElementsByTagName('a')[6];
if(!link7){return};
link7.onclick=function(){
changeStyle('content','');
changeStyle('par','');
return false;
}
}
</script>
</head>
<body>
<h1>Working with multiple style sheets</h1>
<div id="content">
<p id="par">This is the content of the DIV.</p>
</div>
<a href="">Red</a> <a href="">Green</a> <a
href="">Blue</a> <a href="">Font Size 1</a> <a
href="">Font Size 2</a> <a href="">Font Size 3</a> <a
href="">Reset Styles</a>
</body>
</html>
That's all for the moment. As usual with many of my articles on web development, you have complete liberty to modify all of the code samples included in this tutorial. This will help you to acquire more practice in working with multiple style sheets.
Final thoughts
Unfortunately, we've come to the end of this series. As you've seen, manipulating alternate and persistent style sheets is actually a no-brainer process, with the exception of dealing with the usual browser incompatibilities that come up in these cases. However, these problems can be easily tackled with the assistance of JavaScript, even though this means sacrificing a certain level of accessibility.
See you in the next web development tutorial!
| 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. |
