| Recently at work I got handed
a CSS stylesheet to use that I was completely unfamiliar with, and asked
to doctor up some HTML reports I'm working on to make them look nicer.
That's pretty easy stuff if you are the person who authored the CSS or
if you are familiar with using it.
But generally, stylesheets have rules that are related to each other
by design, in order to create a "content concept" for the site
they were designed for, and simply looking over the stylesheet rules or
trying them out one by one is a slow, relatively unproductive way to get
and be able to embrace the "concept".
I reasoned, "Woudn't it be great if there was a script I could feed
this stylesheet to that would display every rule and its visual appearance
by name!" So I searched the 3,083,324,652 web pages on Google using
various combinations of keywords, and though I picked up a few things
I didn't know about CSS in the process, I really was unable to find the
script I needed. So, being the enterprising and ever - curious developer
that I am, I set out to build it for myself.
The process is really not that difficult: The document.styleSheets collection's
items each expose a rules collection which of course
has a length property so you can determine how many rules
you are dealing with, and each rule item exposes a selectorText
property that represents the tag (or combination of tags or class
name) for that rule. For example, the selectorText for this style:
.standardFontBldLft {font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:left
}
would be ".standardFontBldLft", and where
we wish to use it inline to apply to a specific tag, we would use it as
follows:
<div id=myDiv class="standardFontBldLft"
>.standardFontBldLft</div>
Note that in a tag we do not use any preceding
periods and we also do not use any trailing colons. At this point we now
are in possession of 100% of the knowlege we need to construct our script
to display all the rules, their names, and an example tag showing exactly
how each rule appears in a page:
<LINK href=LogStyle.css
rel=Stylesheet>
<script>
// get the number of rules in the stylesheet
var theLen=document.styleSheets[0].rules.length;
function show(){
var stuff;
var sample;
// iterate through the rules collection
for(var i=0;i< theLen;i++)
{
// get selectorText property of this rule
sample=document.styleSheets[0].rules[i].selectorText;
// get rid of the stylesheet junk so we can
use it in a style= attribute
sample=sample.replace(".","");
sample=sample.replace(": ","")
// test to accomodate different HTML control
types
if(sample.indexOf("TD")!=-1 || sample.indexOf("td")!=-1
)
{
stuff+="<table><tr><td class='" + sample
+ "'>" + sample + "</td></tr></table>";
}
else if(sample.indexOf("H1") !=-1)
{
stuff+="<H1 class='" + sample + "'>" + sample
+ "</H1>";
}
else if(sample.indexOf("H2") !=-1)
{
stuff+="<H2 class='" + sample + "'>" + sample
+ "</H2>";
}
else if(sample.indexOf("H3") !=-1)
{
stuff+="<H3 class='" + sample + "'>" + sample
+ "</H3>";
}
else if(sample.indexOf("H4") !=-1)
{
stuff+="<H4 class='" + sample + "'>" + sample
+ "</H4>";
}
else if(sample.indexOf("H5") !=-1)
{
stuff+="<H5 class='" + sample + "'>" + sample
+ "</H5>";
}
else if(sample.indexOf("UL") !=-1 || sample.indexOf("ul")
!=-1)
{
stuff+="<ul class='" + sample + "'>" + sample
+ "</ul>";
}
else if(sample.indexOf("LI") ==0 || sample.indexOf("li")
==0)
{
stuff+="<li class='" + sample + "'>" + sample
+ "</li>";
}
else if(sample.indexOf("TABLE") !=-1 || sample.indexOf("table")
!=-1)
{
stuff+="<table class='" + sample + "'><tr><td>"
+ sample + "</td></tr></table>";
}
else if(sample.indexOf("INPUT") !=-1 || sample.indexOf("input")
!=-1)
{
stuff+="<input class='" + sample + "'>"
+ sample + "</input>";
}
else if(sample.indexOf("A") ==0 || sample.indexOf("a")
==0)
{
stuff+="<BR><a class='" + sample + "' href=http://www.yahoo.com>"
+ sample + "</a>";
}
else if(sample.indexOf("P") ==0 || sample.indexOf("p")
==0)
{
stuff+="<p class='" + sample + "' >" + sample
+ "</p>";
}
else if(sample.indexOf("IMG") ==0 || sample.indexOf("img")
==0)
{
stuff+="<img class='" + sample + "' src='http://www.google.com/images/logo.gif'
>" + sample + "</img>";
}
else
{
stuff+="<div class='" + sample + "' >" +
sample +"</div><BR>";
}
}
res.innerHTML=stuff;
}
</script>
<body > <div align="center">Pete's Nifty Stylesheet Iterator<BR/>
<input type=button value="show" onclick="show();"></div>
<BR><BR>
<div id=res ></div>
</body> |
The above should be self-explanatory. If you'd like to see it in action,
try this
page. Enjoy!
| | Peter Bromberg is a C# MVP, MCP, and .NET consultant who has worked in the banking and financial industry for 20 years. He has architected and developed web - based corporate distributed application solutions since 1995, and focuses exclusively on the .NET Platform. |
|