问题在FireFox专有的风格名称通过document.styleSheets

我有一些改变样式从JavaScript我所遇到的一个奇怪的问题进行试验修改样式时：问题在FireFox专有的风格名称通过document.styleSheets

当我在一个样式规则的属性集，它静静地失败在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绿色的背景，但我什么也看不到了下拉阴影和border-在Fx中的el2的半径，虽然它在webkit上工作正常（至少在Chrome和safari中）。

所以它看起来像rule.style[propName] = value工程标准选项，但不-moz-选项。为什么是这样，有没有办法解决它？

来源

2010-10-13 einarmagnus

另外，如果你想使用CSS属性名称，而不是他们的DOM等价物，你可以使用：

而不是10

：

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

或：

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

来源

2010-10-14 04:49:37

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

来源

2010-10-13 22:46:55 Gus

问题在FireFox专有的风格名称通过document.styleSheets

回答

相关问题