IE 9 DOM元素的style.setProperty()参数无效403.10 禁止访问：配置无效
我自己在写 DOM/CSS 动画时，为了规避 CSS 属性名到 JS 属性名的驼峰命名法转换、cssText 正则替换时所带来的代码繁琐、性能损失，用原生 JavaScript 写的 Set_Style() 函数使用 CSSStyleDeclaration.protostyle.setProperty(name, value, priority) 方法来设置 DOM 元素的 style 属性。代码如下 ——
var is_Trident = navigator.userAgent.match(/MSIE (\d+)|Trident[^)]+rv:(\d+)/i);
var IE_Version = is_Trident ? Number(is_Trident[1] || is_Trident[2]) : NaN, PX_Needed = { width: true, 'min-width': true, 'max-width': true, height: true, 'min-height': true, 'max-height': true, 'border-radius': true, margin: true, padding: true, top: true, left: true };
function Set_Style(iElement, iName, iValue) { if ((! isNaN( Number(iValue) )) && PX_Needed[iName]) iValue += 'px';
iElement.style[
(IE_Version < 9) ? 'setAttribute' : 'setProperty'
](iName, iValue, 'important');
}
IE 8、10、11 还有 Firefox、Chrome 一切正常，唯独 IE 9 报错 —— 参数无效（无论第三个参数是 null、空字符串 还是 important）……【参考文档】
- 微软官方 IE API 文档 —— https://msdn.microsoft.com/en-us/library/ie/ff975226%28v=vs.85%29.aspx
- 第三方兼容 API 文档 —— http://help.dottoro.com/ljdpsdnb.php
写回答
-
呃…… 自己傻逼了…… 实际调用时没完全按文档来……
因为在我的动画方法中为了让数值型 CSS 属性之间的运算更方便，自己写的 Get_Style() 函数会对其返回值自动转类型。当各种计算之后要 Set_Style() 时，setProperty() 的第二个参数可能传入的是 Number 值，而非 IE 9 文档规定的 String……
其实 W3C 的文档也是这么规定的，但大多数浏览器 都会像“连字符 转 驼峰法”那样隐式转换 CSS 属性值的类型，唯独 IE 9 - CSSStyleDeclaration 的程序猿较了个真儿……
——————————————————————
发个修改后的代码 纪念一下重新开始努力的 IE ——
var is_Trident = navigator.userAgent.match(/MSIE (\d+)|Trident[^)]+rv:(\d+)/i); var IE_Version = is_Trident ? Number(is_Trident[1] || is_Trident[2]) : NaN;
function Get_Style(iElement, iName) { var iStyle = (IE_Version < 9) ? iElement.currentStyle.getAttribute(iName) : DOM.defaultView.getComputedStyle(iElement, null).getPropertyValue(iName);
if (typeof iStyle == 'number') return iStyle;
var iNumber = iStyle.match(/(\d+(.\d+)?)(px$)?/i); iNumber = iNumber ? Number(iNumber[1]) : NaN;
return isNaN(iNumber) ? iStyle : iNumber; }
var PX_Needed = { width: true, 'min-width': true, 'max-width': true, height: true, 'min-height': true, 'max-height': true, 'border-radius': true, margin: true, padding: true, top: true, left: true };
function Set_Style(iElement, iName, iValue) { if ((! isNaN( Number(iValue) )) && PX_Needed[iName]) iValue += 'px';
iElement.style[ (IE_Version < 9) ? 'setAttribute' : 'setProperty' ](iName, (IE_Version != 9) ? iValue : iValue.toString(), 'important' ); }
2020-05-28 09:29:47赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
