View Full Version : Altering Mulitple CSS Classes with Javascript

01-23-2007, 11:56 AM
hi all. been racking my head for days and i'm a little over my head here on this script.

i've got a list of items on a page. each item belongs in one or more groups,
so, when you mouseover one group heading the items it belongs to change color.

you can see it here if you rollover Aquatic or Athletics. There's more, but I've left these two group headings for simplicity.


the issue i have is when trying to apply two or more classes to an item (so they belong to multiple groups). the script only picks up the last class in the attribute value.

this is illustrated in <span class="Aquatic Athletics">AT&T Park</span>

so this means when you rollover either Aquatic or Athletics, AT&T Park should change color, but it only does for Athletics currently.

here's the javascript:

function changecss(theClass,element,value) {

var cssRules;
if (document.all) {
cssRules = 'rules';
else if (document.getElementById) {
cssRules = 'cssRules';
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
document.styleSheets[S][cssRules][R].style[element] = value;

and its being triggered in the html by

<a href="#" onmouseover="changecss('.Aquatic','color','#FFCC00'); changecss('.Athletics','color','#666666');">Aquatic</a>

<a href="#" onmouseover="changecss('.Athletics','color','#FFCC00');changecss('.Aquatic','color','#666666');">Athletics</a>

i think what i need help with is searching through the string value for multiple classes for the <span class="Aquatic Athletics">AT&T Park</span>

erm, i also discovered this is doesnt work in FF2. IE7 is ok though. eek!

i'm sure this isn't the best way to do this overall.... the world of wigdets can do this but its beyond me at the moment.. super big thanks if you've got any ideas here.