Javascript 当通过document.styleSheets修改样式时，FireFox中的专有样式名出现问题

我正在尝试从javascript更改一些样式表。我遇到了一个奇怪的问题：

当我在样式规则上设置一个属性时，如果该属性是Firefox的专有属性之一，它将在Firefox中自动失败。我举了一个例子来说明这个问题（）：

div{
保证金：5px；
填充：3倍；
颜色：白色；
}
#el1{
-moz盒阴影：2px 2px 2px红色；
-webkit盒阴影：2px 2px 2px红色；
-moz边界半径：5px；
-webkit边界半径：5px；
背景：褐红色；
高度：20px；
}
#el2{
高度：20px；
背景：海军；
}
​
document.observe（“dom:loaded”，function（））{
var myStyles=$A（document.styleSheets.last（）；
var rules=myStyles.cssRules | | myStyles.rules；
var el1=规则[rules.length-2]，
el2=规则[rules.length-1]；
//工作
el1.风格[“背景”]=“#030”；
if（Prototype.Browser.WebKit）{
//工作
log（“设置webkit专有项”）；
el2.style[“-webkit box shadow”]=“2px 2px 2px蓝色”；
el2.样式[“-webkit边框半径”]=“5px”；
}else if（Prototype.Browser.Gecko）{
//没用？！
log（“设置moz盒阴影”）；
el2.style[“-moz-box-shadow”]=“2px 2px 2px蓝色”；
el2.样式[“-moz边框半径”]=“5px”；
}
});
要素1
要素2

我正在运行FX3.6.10，将

el1

的背景改为绿色没有问题，但我在Fx中看不到

el2

上的阴影和边框半径，尽管它在webkit上运行良好（至少在chrome和safari中是这样）

---

因此，似乎

规则.style[propName]=value

适用于标准选项，但不适用于

-moz-

选项。这是为什么？有什么办法吗？

对于-moz-options，似乎需要删除破折号并将每个单词的第一个字母大写：

    } else if (Prototype.Browser.Gecko) {
        // Works now?
        console.log("setting moz box-shadow");
        // Changed colour to red for contrast
        el2.style["MozBoxShadow"] = "2px 2px 2px red";
        el2.style["MozBorderRadius"] = "5px";
    }

我通过循环遍历

el2.style

的所有元素并输出它们来解决这个问题：

for(var i in el2.style) {
    console.log('el2.style[' + i + ']: ' + el2.style[i]) ;
}

---

或者，如果要使用CSS属性名而不是它们的DOM等价物，可以使用：

el2.style.setProperty("-moz-box-shadow", "2px 2px 2px red", "");

而不是：

el2.style.MozBoxShadow = "2px 2px 2px red";

或：

el2.style.MozBoxShadow = "2px 2px 2px red";

el2.style["MozBoxShadow"] = "2px 2px 2px red";