通過document.styleSheets修改樣式時，FireFox中的專有樣式名稱存在問題

Question

我正在嘗試從javascript更改某些樣式表，遇到一個奇怪的問題：

當我在樣式規則上設置屬性時，如果該屬性是其專有屬性之一，則它在Firefox中會默默失敗。 我舉了一個演示這個問題的示例（實時示例）：

<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 個解決方案

解決方案1
2 2010-10-13 22:46:55

解決方案2
0 已采納 2010-10-14 04:49:37

通過document.styleSheets修改樣式時，FireFox中的專有樣式名稱存在問題

問題描述

2 個解決方案

解決方案1 2 2010-10-13 22:46:55

解決方案2 0 已采納 2010-10-14 04:49:37

解決方案1
2 2010-10-13 22:46:55

解決方案2
0 已采納 2010-10-14 04:49:37