Question

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

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

<html>
<head>
<style type="text/css">
div {
    margin: 5px;
    padding: 3px;
    color: white;
}
#el1 {
    -moz-box-shadow: 2px 2px 2px red;
    -webkit-box-shadow: 2px 2px 2px red;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: maroon;
    height: 20px;
}
#el2 {
    height: 20px;
    background:navy;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript">
    document.observe("dom:loaded", function() {
        var myStyles = $A(document.styleSheets).last();
        var rules = myStyles.cssRules || myStyles.rules;

        var el1 = rules[rules.length-2],
            el2 = rules[rules.length-1];

        //works
        el1.style["background"] = "#030";

        if (Prototype.Browser.WebKit) {
            //works
            console.log("setting webkit proprietaries");
            el2.style["-webkit-box-shadow"] = "2px 2px 2px blue";
            el2.style["-webkit-border-radius"] = "5px";

        } else if (Prototype.Browser.Gecko) {
            // does not work?!
            console.log("setting moz box-shadow");
            el2.style["-moz-box-shadow"] = "2px 2px 2px blue";
            el2.style["-moz-border-radius"] = "5px";
        }
    });
</script>
</head>
<body>
  <div id="el1">Element 1<div>  
  <div id="el2">Element 2<div>
</body>
</html>

我正在运行Fx 3.6.10并且将el1的背景更改为绿色没有问题，但我在Fx中看不到el2上的阴影和边界半径，尽管它有效在webkit上很好（至少在chrome和safari中）。

因此，似乎rule.style[propName] = value适用于标准选项，但不适用于-moz-选项。为什么会这样，有什么办法吗？

Answer 1

对于-moz-选项，似乎您需要删除破折号并将每个单词的首字母大写：

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

Answer 2

或者，如果要使用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";

通过document.styleSheets修改样式时FireFox中专有样式名称的问题

2 个答案: