getComputedStyle兼容

2016-05-12  本文已影响215人  前端历险记

兼容处理代码

    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
上一篇下一篇

猜你喜欢

热点阅读