2012-12-07 45 views
1

我有一些非常簡單的JavaScript內置,可以在Chrome中正常工作。但是,有一些東西在IE和Firefox中不起作用。下面是代碼:在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

請僅發佈理解您的問題所需的最低代碼。沒有人願意通過這段文字在門口迎接。 – thatidiotguy

+0

您應該只發布儘可能多的代碼來演示/再現問題 - 不要更多,也不要少。理想情況下,你可以在http://jsfiddle.net上發佈一個例子(但這不是必要的,有時對某些類型的問題是不可能的)。 – apsillers

回答

5

在javascript中更改CSS屬性時,您需要駱駝案例,例如:background-color變爲backgroundColor,background-image變爲backgroundImage。

+0

這適用於Chrome,Firefox和IE9。但是,不在9之前的IE版本中。似乎整個ChangeCSSRule函數不起作用。有什麼建議麼? –

+0

你真的把你的代碼更改爲駱駝大小寫屬性,看看它們是否在IE <9中工作? –

+0

是的,我做了,它不起作用。 –