Show - Hide text Visibility with JavaScript

For a whole class...?

[Jay_R]

Ok, I want to dynamically show and hide some asterisks for a form. I’ve encased them all in spans under a common class name. Is it possible for JS to locate and change all of them easily, or am I going to have to give each one a unique name/ID and reference each's style individually?

Here’s some pseudo script to give a better idea of what I'd like to do...

function showHide()
{

if (field has such and such a value)
{
document.“all showhide classes”.style.visibility = “hidden”;
}

if (field has such and such a value)
{
document.“all showhide classes”.style.visibility = “visible”;
}

}

I realize this script probably looks laughable. And I’m guessing this approach is not possible because the DOM seems based around IDs and Names. But I really have an incomplete knowledge, so I thought I’d ask. Don’t suppose there is any way to access the stylesheet directly to gain this end?
Thanks for the help…
-Jay

[Birdman]

Yes, it can be done. The following script assumes that the rule(class) you are changing is the first rule in the stylesheet. It also assumes it is the only(or first) stylesheet referenced.

function showHide(val){

if (document.styleSheets) {
styleSheet = document.styleSheets[0];

if (styleSheet.cssRules) {
cssRule = styleSheet.cssRules[0];
} else if (styleSheet.rules) {
cssRule = styleSheet.rules[0];
}
if (cssRule) {
cssRule.style.visibility = val;
}
}
}

<input type="checkbox" onchange="showHide(this.checked?'visible':'hidden')" />
(not real sure about the above usage, but I'm sure you'll figure it out)

[Bernard Marx]

A more general solution here:
[webmasterworld.com ]
..plus all the caveats.

[Bernard Marx]

Although the 'modify class definitions at source' technique works on Moz & IE, it could still be described as "dodgey" - at least for the current state of things. There are 2 other ways that could arguably be described as "demonstrably less dodgey"

In both cases, you have a ref to the form element:

var theForm = document.forms["formName"]

1. Brute force

Get the collection of spans in the form, and loop through them, filtering the classNames (not nec. if you have no other spans in there)

[blue]var spans = theForm.getElementsByTagName("span")
for(var k=0;k<spans.length;k++)
  if(spans[k].className.toLowerCase()=="thespanclassname")
    spans[k].style.visibility = "hidden" // or .display = "none"[/blue]

2. Contextual selector

Say this is your stylesheet

[blue].spanclass
{
 ... style defs...
}
.noasterix .spanclass /* note the space */
{
 visibility:hidden;
}[/blue]

The 2nd rule affects class, spanclass when it has an ancestor of class noasterix.
When you want to hide the spans, simply:

[blue]theForm.className = "noasterix"[/blue]

To show them again:

[blue]theForm.className = ""[/blue]

This is assuming your form has no class to start with, as it probably doesn't. The technique is still possible if it does, but it's trickier.

[Jay_R]

Hey, thank you both very much. I'm a little disappointed I didn't see that other post before I opened my mouth (typed my text?). Anyway, there's some good ideas there too, and the approaches here are a little different also. These will definaly help me though, thanks again.

-Jay