Entry
How do I manipulate a style class?
Jun 28th, 2000 07:33
Martin Honnen,
With the cascading nature of css there is no unique style class object
as there can be several rules for a style class but that allows you to
simply add another rule for the style class if you want to change a
property:
<HTML>
<HEAD>
<STYLE>
.aClass {
color: white;
background-color: orange;
}
</STYLE>
<SCRIPT>
function setClassProperty (className, property, value) {
if (document.all) {
var lastStyleSheet =
document.styleSheets[document.styleSheets.length - 1];
var selector = '.' + className;
var css = property + ': ' + value + ';';
lastStyleSheet.addRule(selector, css);
}
else if (document.getElementById) {
var lastStyleSheet =
document.styleSheets[document.styleSheets.length - 1];
var ruleText = '.' + className + ' { ' + property + ': ' + value
+ '}';
lastStyleSheet.insertRule(ruleText, lastStyleSheet.cssRules.length);
}
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON ONCLICK="setClassProperty('aClass', 'display', 'none')">
hide
</BUTTON>
<BUTTON ONCLICK="setClassProperty('aClass', 'display', 'block')">
show
</BUTTON>
<P CLASS="aClass">
Kibology for all.
</P>
<DIV CLASS="aClass">
All for Kibology.
</DIV>
<P CLASS="aClass">
JavaScript.FAQTs.com
</P>
</BODY>
</HTML>
