1

Chromeで正常に動作する非常に単純なjavascriptを作成しました。ただし、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 関数が 2 つの「色」行で機能することです。助言がありますか？

4

1 に答える 1

5

JavaScript で CSS 属性を変更する場合は、キャメルケースにする必要があります。たとえば、background-color が backgroundColor になり、background-image が backgroundImage になります。

于 2012-12-07T18:15:26.310 に答える