【问题标题】:Background images and colors not changing in IE or Firefox背景图像和颜色在 IE 或 Firefox 中没有变化
【发布时间】:2012-11-25 22:51:30
【问题描述】:

我构建了一些在 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 函数作用于两条“颜色”线。有什么建议吗?

【问题讨论】:

  • 请仅发布理解您的问题所需的最少代码。没有人愿意在门口受到这堵文字墙的欢迎。
  • 您应该只发布演示/重现问题所需的尽可能多的代码——不多也不少。理想情况下,您可以在jsfiddle.net 上发布一个示例(但这不是必需的,有时对于某些类别的问题是不可能的)。

标签: javascript html internet-explorer google-chrome firefox


【解决方案1】:

在 javascript 中更改 CSS 属性时,您需要对它们进行驼峰式处理,例如:background-color 变为 backgroundColor,background-image 变为 backgroundImage。

【讨论】:

  • 这在 Chrome、Firefox 和 IE9 中完美运行。但是,在9之前的IE版本中没有。似乎整个ChangeCSSRule功能都不起作用。有什么建议吗?
  • 您是否真的将代码更改为驼峰式属性以查看它们在 IE
猜你喜欢
  • 2013-06-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-16
  • 2012-03-15
  • 2011-12-14
  • 2016-02-29
  • 2014-07-07
  • 1970-01-01
相关资源
最近更新 更多