problem with proprietary style names in FireFox when modifying styles through document.styleSheets
Question
I am experimenting with changing some stylesheets from javascript I have come across a strange issue:
When I set an attribute on a style rule it silently fails in Firefox if the property is one of their proprietary ones. I have made an example demonstrating the issue ( 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>
I am running Fx 3.6.10 and it has no problem changing the background of el1 to green but I see nothing of the drop-shadow and border-radius on el2 in Fx although it works fine on webkit (at least in chrome and safari here).
So it seems like the rule.style[propName] = value works on standard-options but not on -moz- options. Why is that, and is there any way around it?
2 answers
solution1
2 2010-10-13 22:46:55
For -moz- options, it seems you need to remove the dashes and capitalise the first letter of each word:
} 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";
}
I worked this out by looping through all elements of el2.style and outputting them:
for(var i in el2.style) {
console.log('el2.style[' + i + ']: ' + el2.style[i]) ;
}
solution2
0 ACCPTED 2010-10-14 04:49:37
Alternatively, if you want to use the CSS property names instead of their DOM equivalents, you can use:
el2.style.setProperty("-moz-box-shadow", "2px 2px 2px red", "");
instead of:
el2.style.MozBoxShadow = "2px 2px 2px red";
or:
el2.style["MozBoxShadow"] = "2px 2px 2px red";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.