Я экспериментирую с изменением некоторых таблиц стилей из 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 на зеленый, но я не вижу ничего из тени и границы на el2 в Fx, хотя он отлично работает на webkit по крайней мере, в хром и сафари здесь).
Похоже, что rule.style[propName] = value работает со стандартными параметрами, но не с -moz-. Почему это так, и есть ли способ обойти это?