lk******@geocities.com wrote:
I've tried to take your advice and make this class invisible like this:
document.styleSheets[0].dropDownNav.visibility='hidden';
Is this the right way to do it?
[...]
No, but I think you worked that out ;-)
Look at the posts above from Rob & me. What you are trying to do is
find the style object that you want to change. You have to find it
within the stylesheets collection.
You got as far as the cssRules collection, but then there is the actual
rules which are named by "selectorText". There are two issues here:
1. The selectorText is exactly as per the rule, including any leading
characters such as '.', '@', '#'etc. whereas the className of a DOM
object has the leading '.', '@' or '#' or whatever stripped off (I'm
no expert on styles...). The selectorText for some style rules have
no prefix character (p, h1, etc.)
2. IE puts an '*' in front of the selectorText.
There is probably a clever way to do it with a regEx, but I'll save
that for you to figure out!
The following script searches through all the stylesheets and allows
for IE's asterisk, but expects you to hard code the selectorText
prefix.
Here's just the script which works in Safari, Firefox and IE on Mac:
<script type="text/javascript">
// Pass the selectorText (c), property to change (p) and new value (v)
function modStyle(c,p,v) {
// get the stylesheets
var sheets = document.styleSheets;
// Go thru each sheet looking for the right class (selectorText)
for (var i=0, sl=sheets.length; i<sl; i++) {
var rules = sheets[i].cssRules;
// Now the rules...
for (var j=0, rl=rules.length; j<rl; j++) {
// Check selectorText is same as c
// Allow for IE putting a * in front of selectorText
// Could just remove * but chose to use || instead
// var r = rules[j].selectorText.replace(/^\*/,'');
if (rules[j].selectorText == c ||
rules[j].selectorText == '*'+c ) {
// Now set the property to the value
rules[j].style[p] = v;
}
}
}
}
</script>
--
Fred
