IE 또는 Firefox에서 배경 이미지 및 색상이 변경되지 않습니다.

Question

Chrome에서 잘 작동하는 간단한 자바 스크립트가 있습니다. 그러나 IE와 Firefox에서는 작동하지 않는 몇 가지 사항이 있습니다. 여기에 코드입니다 :

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; 
} 

그리고 여기에 스타일 시트입니다 :

.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; 
} 

내가 작동하지 않는 몇 줄 옆에 별표를 뒀다. 이상한 부분은 ChangeCSSRule 함수가 두 "색"줄에서 작동한다는 것입니다. 어떤 제안?

Answer 1

자바 스크립트에서 CSS 속성을 변경하려면 camel-case가 필요합니다 (예 : background-color가 backgroundColor, background-image가 backgroundImage가됩니다).