Question

我正在尝试在Java GWT代码中编写一个Javascript函数，该函数获取以下样式的值

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

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

我在这里查看了关于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

请看这里：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 2

这是解决方案。它基于this Trick，但我已经扩展它，以便解决两个问题。

第一个问题是borderTopWidth中的left（bottom，right，el.currentStyle}以形容词的形式返回 - 'thin'，{{1 }，'medium' - 或'thick'。 Trick将返回异常。

第二个问题 - 某些值无法正确计算。例如'none'和其他一些。您可以通过将此Trick方法应用于所有属性来自行检查：

opacity

最后，根据假设，这是我的解决方案，我知道我希望通过此函数获得的所有属性：

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

Answer 3

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

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

Answer 4

我使用了与原始解决方案类似的方法，并使用了一个额外的案例来处理内联样式，还检查当前文档是否支持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 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;
    };
}

getComputedStyle就像IE8的javascript函数一样

5 个答案: