IE8的getComputedStyle类javascript函数

我试图在JavaGWT代码中编写一个Javascript函数，该代码获取以下样式的值

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

getComputedStyle

在所有浏览器中都很有用，但IE8不支持我所理解的功能

我在这里看了一些关于斯迈勒主题的帖子，但都没有找到上面提到的风格

斯迈勒主题帖子

这是我的初始解决方案，没有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

替换函数有什么建议吗？

请看这里：

守则：

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"));
}

---

以下是IE8/getComputedStyle的更完整的polyfill，它应处理所有情况：

---

我使用了与我的原始解决方案类似的方法，并添加了一个案例来处理内联样式，另外，检查当前文档是否支持

getComputedStyle

的方法与它在

文档中检查的方法有点不同。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;

    }-*/;

---

这是解决方案。它是基于，但后来我扩展了它以解决两个问题

第一个问题是

el.currentStyle

中的

borderTopWidth

（

left

，

bottom

，

right

）返回为形容词-

'thin'

，

'medium'

，

'thigh'

-或

'none'

。该技巧将返回异常

第二个问题-某些值无法正确计算。例如

不透明度

和其他一些。通过将此技巧方法应用于所有属性，您可以自己进行检查：

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;
    }}

---

到目前为止，我找到的最佳解决方案是另一个答案：。它是jQuery curCSS（）代码的独立版本；你可能需要调整它以适应你的需要（正如马克西姆在他的回答中所指出的）。这里是IE8部分的一个紧凑版本，如果你只是想加入一些东西的话

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;
    };
}

---

你知道我如何将这段代码放入Java GWT代码中吗？我不熟悉Java/GWT，但你应该能够将该文件包含在页面的部分（如果你使用jsp），而不是使用

this

，返回值应该是一个新创建的对象。现在，它将

el

和

getPropertyValue

属性分配给window对象，并随后调用

window。getComputedStyle

将覆盖它们。（还有一个小问题：正则表达式中的

{1}

和测试正则表达式是否匹配的if语句都是不必要的）您声明了第二个参数

pseudo

，但没有对它做任何处理。如何获得伪元素的计算样式？