Modifying CSS class property with JS

How can modify a CSS class property with JS?

[asantos]

How can modify a CSS class property with JS? For example, i have this on my CSS:

th.sel a {
color: #FFF;
background: no-repeat right center;
}

I need to add a background-image property+value through Javascript to the links that are nested inside th (table headers) that have the "sel" class.

I was thinking of something like this:
document.getElementById("yadayada").style.backgroundImage="url('test.gif')";

But that only works for a specific object. I need it to work for all links (a) that are nested inside table headers (th) that have the sel className.

Thanks,
Andres

[johnl]

Hi, and welcome.

You might try something like:

function Doit()
{
var elsa, elsth, i, j;
// -- first select all your table headers:
elsth=document.getElementsByTagName("th");
for (i=0; i<elsth.length; i++)
 {
 // -- second take only those with the desired classname:
 if(elsth[i].className=="sel")
 {
 elsa=elsth[i].childNodes;
 // -- now look for childs which are anchors:
 for (j=0; j<elsa.length; j++)
 {
 if(elsa[j].nodeName=="A")
 {
 // -- finally set the desired properties
 elsa[j].style.background.image="url('test.gif')";
 }
 }
 }
 }
}

This code is not tested though because you have missed to include a short example of your html and I wasn't in the mood to construct one myself :-)

Good luck!