Entry
How do I change a style property of a style class?
Jun 22nd, 2006 18:04
Nick Z., Martin Honnen,
You search trough document.styleSheets for the style rule defining the
class and then change properties of its style object:
<HTML>
<HEAD>
<STYLE>
.aStyleClass {
display: none;
color: white;
background-color: orange;
}
</STYLE>
<SCRIPT>
function getStyleClass (className) {
for (var s = 0; s < document.styleSheets.length; s++)
{
if(document.styleSheets[s].rules)
{
for (var r = 0; r < document.styleSheets[s].rules.length; r++)
{
if (document.styleSheets[s].rules[r].selectorText == '.' + className)
{
return document.styleSheets[s].rules[r];
}
}
}
else if(document.styleSheets[s].cssRules)
{
for (var r = 0; r < document.styleSheets[s].cssRules.length; r++)
{
if (document.styleSheets[s].cssRules[r].selectorText == '.' + className)
return document.styleSheets[s].cssRules[r];
}
}
}
return null;
}
</SCRIPT>
</HEAD>
<BODY>
<SPAN CLASS="aStyleClass">
JavaScript.FAQTs.com
</SPAN>
<BUTTON
ONCLICK="getStyleClass('aStyleClass').style.display = 'inline';"
>
set inline
</BUTTON>
<BUTTON
ONCLICK="getStyleClass('aStyleClass').style.display = 'block';"
>
set block
</BUTTON>
<BUTTON
ONCLICK="getStyleClass('aStyleClass').style.display = 'none';"
>
set none
</BUTTON>
<BR>
<DIV CLASS="aStyleClass">
JavaScript.FAQTs.com
</DIV>
</BODY>
</HTML>
Such code is IE4+, Opera 9+, and NN6 only.
