While experimenting with altering some stylesheets using JavaScript, I encountered an interesting issue:
When attempting to set an attribute on a style rule in Firefox and the property is one of their proprietary ones, it fails silently. To demonstrate this problem, I created an example (view 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>
Although I am using Fx 3.6.10 and successfully changing the background color of el1 to green, I am unable to see the drop shadow and border radius on el2 in Firefox, unlike in WebKit (Chrome and Safari).
It appears that setting rule.style[propName] = value works for standard options but not for -moz- options. Why does this happen and is there a workaround?