喜歡的getComputedStyle爲IE8

Question

javascript函數

我試圖寫一個Java GWT代碼獲取以下樣式

"direction", "fontFamily", "fontSize", "fontSizeAdjust", "fontStyle", "fontWeight", "letterSpacing", "lineHeight", "padding", "textAlign", "textDecoration", "textTransform", "wordSpacing" 

的getComputedStyle，不同的IE8這沒有按」所有的瀏覽器有用的價值內的JavaScript函數T公司的支持這樣的功能，因爲我明白

我看着約smiler主題在這裏，但所有的人的職位未能獲得上述樣式之一

smiler主題的帖子1，2。

這是我沒有IE8特殊情況

public static native String getStyleProperty(Element element, String style) /*-{ 
     if (element.currentStyle) { 
      return element.currentStyle[style]; 
     } else if (window.getComputedStyle) { 
      return window.getComputedStyle(element, null).getPropertyValue(
        style); 
     } 
    }-*/; 

針對IE8的好getComputedStyle替換功能有什麼建議最初的解決方案？

Answer 1

我使用了一種類似的方法來處理內聯樣式的另一個案例，也檢查當前文檔是否支持getComputedStyle有點不同，它檢查document.defaultView而不是窗口本身，這裏是全功能

public static native String getStyleProperty(Element el, String prop) /*-{ 
     var computedStyle; 
     if (document.defaultView && document.defaultView.getComputedStyle) { // standard (includes ie9) 
      computedStyle = document.defaultView.getComputedStyle(el, null)[prop]; 

     } else if (el.currentStyle) { // IE older 
      computedStyle = el.currentStyle[prop]; 

     } else { // inline style 
      computedStyle = el.style[prop]; 
     } 
     return computedStyle; 

    }-*/; 

source

Answer 2

看過來：http://snipplr.com/view/13523/

代碼：

if (!window.getComputedStyle) { 
    window.getComputedStyle = function(el, pseudo) { 
     this.el = el; 
     this.getPropertyValue = function(prop) { 
      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 this; 
    } 
} 

例子：

window.onload = function() { 
    var compStyle = window.getComputedStyle(document.getElementById('test'), ""); 

    alert(compStyle.getPropertyValue("color")); 
    alert(compStyle.getPropertyValue("float")); 
    alert(compStyle.getPropertyValue("background-color")); 
} 

Answer 3

這裏是IE8 /的getComputedStyle更完整的填充工具應該處理的所有情況：

https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

Answer 4

這裏是解決方案。它基於this Trick，但是爲了解決兩個問題，我擴展了它。

第一個問題是borderTopWidth（left，bottom，right）在el.currentStyle返回作爲形容詞 - 'thin'，'medium'，'thick' - 或'none'。該技巧將返回異常。

第二個問題 - 某些值將無法正確計算。如opacity等。您可以通過應用這一招的方法來所有屬性通過檢查自己：

var _style = el.currentStyle; 
for (var key in _style) { 
     /// here is the Trick..... 
} 

最後，這裏是我的解決方案，基於假設，我知道我想要通過這個功能來獲得屬性：

if (!window.getComputedStyle) window.getComputedStyle = function(el){ 
    var __style = el.currentStyle, 
     _style = {}; 
    for (var i in __style) { 
     _style[i] = __style[i]; 
    } 

    // IE8 returns border widths as adjectives 
    if (style.indexOf("border") === 0) 
     switch (_style[style]) { 
      case "thin": 
       _style[style] = 2; 
       break; 
      case "medium": 
       _style[style] = 4; 
       break; 
      case "thick": 
       _style[style] = 6; 
       break; 
      default: 
       _style[style] = 0; 
     } 

    // based on http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291   
    var leftCopy = el.style.left; 
    var runtimeLeftCopy = el.runtimeStyle.left; 
    // some properties, that I want to use 
    _styleParams = { 
     left : 1, 
     right : 1, 
     top : 1, 
     bottom : 1, 
     width : 1, 
     height : 1, 
     borderLeftWidth : 1, 
     borderRightWidth : 1, 
     borderTopWidth : 1, 
     borderBottomWidth : 1, 
     paddingLeft : 1, 
     paddingRight : 1, 
     paddingTop : 1, 
     paddingBottom : 1, 
     marginLeft : 1, 
     marginRight : 1, 
     marginTop : 1, 
     marginBottom : 1 
    } 
    for (var key in _styleParams) {    
     el.runtimeStyle.left = el.currentStyle.left;    
     el.style.left = _style[key];       
     _style[key] = el.style.pixelLeft; 
     el.style.left = leftCopy; 
     el.runtimeStyle.left = runtimeLeftCopy;    
    } 


    // opacity for IE8 
    if (_style.filter.match('alpha')) { 
     _style.opacity = _style.filter.substr(14); 
     _style.opacity = parseInt(_style.opacity.substring(0, _style.opacity.length-1))/100; 
    } else { 
     _style.opacity = 1; 
    }} 

Answer 5

到目前爲止我找到的最佳解決方案來自於另一個答案：https://stackoverflow.com/a/17890142/3672465。它是jQuery curCSS（）代碼的獨立版本;您可能需要調整以適應您的需求（如馬克西姆在答案中所指出的）。這裏有一個緊湊版本的IE 8部分，如果你只是想要一些東西放入。

if(!window.getComputedStyle && document.documentElement.currentStyle){ 
    function getStyles(elem){ return elem.currentStyle; }; 
    function curCSS(elem, name, computed){ 
     var rnum = /^([+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|))(?!px)[a-z%]+$/i; 
     var t = 'left', l, rs, rsL, c = computed || getStyles(elem), 
      r = c ? c[ name ] : undefined, s = elem.style; 
     if(r == null && s && s[ name ]){ r = s[ name ]; } 
     if(rnum.test(r) && !/^(top|right|bottom|left)$/.test(name)){ 
      l = s[t]; rs = elem.runtimeStyle; rsL = rs && rs[t]; 
      if(rsL){ rs[t] = elem.currentStyle[t]; } 
      s[t] = name === 'fontSize' ? '1em' : r; r = s.pixelLeft + 'px'; 
      s[t] = l; if(rsL){ rs[t] = rsL; } 
     } 
     return r === '' ? 'auto' : r; 
    }; 
}