getComputedStyle兼容

兼容处理代码

    if (typeof window.getComputedStyle !== "function") {
        window.getComputedStyle = function(el, pseudo) {
          var oStyle = {};
          var oCurrentStyle = el.currentStyle || {};
          for (var key in oCurrentStyle) {
            oStyle[key] = oCurrentStyle[key];
          }
           
          oStyle.styleFloat = oStyle.cssFloat;
           
          oStyle.getPropertyValue = function(prop) {
            //if (prop == 'float') prop = 'styleFloat';
            return oCurrentStyle.getAttribute(prop) || null;  // IE6 do not support "key-key" but "keyKey"
            /*var re = /(\-([a-z]){1})/g;
            if (prop == 'float') prop = 'styleFloat';
            if (re.test(prop)) {
              prop = prop.replace(re, function () {
                return arguments[2].toUpperCase();
              });
            }
            return el.currentStyle[prop] ? el.currentStyle[prop] : null;*/
          };
          return oStyle;
        };
    }

其中oStyle.styleFloat = oStyle.cssFloat;
styleFloat属性为ie特有,当给元素float:left;
测试获取,得到结果如下:

// ie8+,chrome :left
getComputedStyle(ele,null).getPropertyValue('float')

// chrome,ie9+返回空 ie8返回null
getComputedStyle(ele, null).getPropertyValue('cssFloat')

// ie+chrome返回:left, ie8返回undefined
getComputedStyle(ele, null).cssFloat
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 新开始,希望在简书发现有趣的东西,产生有趣的连接,让生活更美好!
    星空_cfa4阅读 793评论 0 0
  • //等额本息---------(每月还款数一致) //每月月供额=〔贷款本金×月利率×(1+月利率)^还款月数〕÷...
    mengyong阅读 38,255评论 0 0
  • 教微积分的老师貌似挺有名的,贴吧里有人提起他的名号,回应的人总会跟一句:”哦,那个留美博士。”毕竟留美博士对于我这...
    幽贞阅读 1,287评论 0 1
  • 挺好的,报名了两门分享都没有去听,说好的写作也并没有去坚持。 知道人生有各种可能,态度啊,行为啊都很重要,似乎就想...
    袁公子爱生活阅读 1,391评论 0 0