Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

getComputedStyle like javascript function for IE8

I'm trying to write a Javascript function inside a Java GWT code that gets the value of the following styles

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

The getComputedStyle was useful in all browsers except IE8 which doesn't support such function as I understand

I looked at the posts about smiler subject here but all of them failed to get one of the above styles

smiler subject posts 1, 2.

Here is my initial solution without the IE8 special case

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

Any suggestions for a good getComputedStyle replacement function for IE8 ?

like image 396
montss Avatar asked Feb 15 '14 12:02

montss


Video Answer


1 Answers

Look over here: http://snipplr.com/view/13523/

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

Example:

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

    alert(compStyle.getPropertyValue("color"));
    alert(compStyle.getPropertyValue("float"));
    alert(compStyle.getPropertyValue("background-color"));
}
like image 131
Niels Avatar answered Oct 27 '22 09:10

Niels