getComputedStyle wie javascript-Funktion für den IE8

Ich bin versucht, zu schreiben eine Javascript-Funktion in ein Java-GWT-code ruft den Wert der folgenden Stile

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

Den getComputedStyle war nützlich in allen Browsern außer dem IE8 das nicht unterstützen diese Funktion, so wie ich das verstehe

Schaute ich mir die Beiträge über smiler Thema hier aber alle von Ihnen konnte nicht eine der oben genannten Stile

smiler Thema Beiträge Eins, Zwei.

Hier ist meine erste Lösung ohne den IE8 speziellen Fall

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);
        }
    }-*/;

Irgendwelche Vorschläge für eine gute getComputedStyle Ersatz-Funktion für den IE8 ?

InformationsquelleAutor montss | 2014-02-15

Schauen Sie hier: http://snipplr.com/view/13523/

Code:

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

Beispiel:

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

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

Anstelle der Verwendung von this der Rückgabewert sollte ein neu erstelltes Objekt. Jetzt weist es el und getPropertyValue Eigenschaften für das window-Objekt, und nachfolgende Aufrufe von window.getComputedStyle diese überschrieben. (Auch eine geringfügige nitpick: sowohl die {1} im regulären Ausdruck und die if-Anweisung testen, ob der reguläre Ausdruck findet, sind unnötig)
Sie erklärt das zweite argument, pseudo, aber nicht tun nichts mit ihm. Wie bekomme ich die berechneten Stil von pseudo-Elemente?

InformationsquelleAutor Niels

Hier ist die Lösung. Es basiert auf dieser Trick, aber dann habe ich erweitert, es im Fall zu beheben zwei Probleme.

Erste problem ist, dass borderTopWidth (left,bottom,right) in el.currentStyle kehrt als Adjektiv - 'thin', 'medium', 'thick' - oder 'none'. Der Trick zurück Ausnahme.

Und das zweite problem, dass einige Werte nicht korrekt berechnet werden. Wie opacity und einige andere. Sie können überprüfen Sie es selbst durch die Anwendung dieser Trick-Methode, um alle Eigenschaften:

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

Endlich, hier ist meine Lösung, basierend auf der Annahme, dass ich weiß, dass alle Eigenschaften, die ich möchte zu bekommen, die von dieser Funktion:

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

InformationsquelleAutor Maksim Slepov

2

Hier ist vollständiger polyfill für IE8/getComputedStyle, die alle Fälle behandeln soll:

https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js
- Irgendeine Idee, wie ich diesen code innerhalb einer Java-GWT-code wie mein code in der Frage oben?
- Nun, ich bin nicht vertraut mit Java/GWT, aber Sie sollten in der Lage zu zählen, dass die Datei im < head > - Abschnitt der Seite ( jsp wenn Sie diese verwenden )
InformationsquelleAutor Goran.it

Ich verwendete eine ähnliche Methode, um meine ursprüngliche Lösung mit einem zusätzlichen Fall zu behandeln, inline-styles, auch die Möglichkeit zu prüfen, ob das aktuelle Dokument die Unterstützung der getComputedStyle ist ein bisschen anders, prüft es in der document.defaultView anstelle der Fenster selbst, hier ist die volle Funktion

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;

    }-*/;

Quelle

InformationsquelleAutor montss

Die beste Lösung, die ich bisher gefunden habe, war von einer anderen Antwort hier: https://stackoverflow.com/a/17890142/3672465. Es ist eine standalone-version des jQuery-curCSS() code, die Sie benötigen, um diese zu justieren, um Ihre Bedürfnisse anzupassen (wie Maksim Notizen in seiner Antwort). Hier ist eine kompakte version des IE 8 Teil, wenn Sie nur wollen, etwas zu fallen.

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

InformationsquelleAutor Beejor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.