Imagens de fundo e cores que não mudam no IE ou no Firefox - javascript, html, internet-explorer, google-chrome, firefox

Eu tenho um javascript bem simples que funciona bem no Chrome. No entanto, há algumas coisas que não estão funcionando no IE e no Firefox. Aqui está o código:

function updateColors(){
ChangeCSSRule("background-color",color,2);
ChangeCSSRule("color",textcolor,0);
ChangeCSSRule("color",textcolor,1);
ChangeCSSRule("background-image","url(borders/r_edge_"+imgcolor+".png)",3);
ChangeCSSRule("background-image","url(borders/l_edge_"+imgcolor+".png)",4);
ChangeCSSRule("background-image","url(borders/t_edge_"+imgcolor+".png)",5);
ChangeCSSRule("background-image","url(borders/b_edge_"+imgcolor+".png)",6);
}

function ChangeCSSRule(xElement, xValue, value){
var strCSS = "cssRules";
if(document.all){
strCSS = "rules";
}
document.styleSheets[0][strCSS][value].style[xElement] = xValue;
}

E aqui está a folha de estilo:

.firstName {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
margin: 0px;
}
.lastName {
font-family: Verdana, Geneva, sans-serif;
font-size: 25px;
text-wrap: none;
margin: 0px;
}
.bg {
background-color: #ffffff;
}
.r_edge {
background-image: url(borders/r_edge_white.png);
background-repeat: repeat-y;
}
.l_edge {
background-image: url(borders/l_edge_white.png);
background-repeat: repeat-y;
}
.t_edge {
background-image: url(borders/t_edge_white.png);
background-repeat: repeat-x;
}
.b_edge {
background-image: url(borders/b_edge_white.png);
background-repeat: repeat-x;
}
.right {
text-align: right;
}

Eu coloquei asteriscos próximos às poucas linhas que não estão funcionando. A parte estranha é que a função ChangeCSSRule funciona nas duas linhas de "cor". Alguma sugestão?

Respostas:

Ao alterar os atributos CSS em javascript, você precisa colocá-los em camelo, por exemplo: background-color torna-se backgroundColor e background-image torna-se backgroundImage.