Reading style info with JavaScript

Part of the online game I’m now developing (which needs a name - I was thinking of “Cash City Wars”) requires some Javascript that alters the style of a DIV and then puts it back as it was. Changing the style is easy. For example to make the text green:

// Some code to get the DIV object and  store it in obj.

obj.style.color = "green";

Storing the old style information is a little difficult. I tried:

obj.oStyle = obj.style;
obj.style.color = "green";

But that didn’t work for two reasons: firstly objects are passed by reference so oStyle always contained the same thing as style. And secondly style (when used for reading) only contains explicitly set properties. So if you set width and left you’d still have to work out right yourself.

I found out there is another property you can use, getComputedStyle. This has it’s own little quirks however. Firstly it isn’t an method of the object, but used more like a function and secondly it doesn’t seem to work in IE6.

Firefox (W3 DOM):

temp = document.defaultView.getComputedStyle(obj, "");
temp.getPropertyValue(prop);

IE6

obj.currentStyle[prop];

I personally think the IE way makes more sense in this case but we have to cope wtih both. One thing that is slightly awkward is that one is a function the other is an array. So to make a simple to use interface to the correct function, we can use Javascript’s ability to use functions as first class objects (which means you can assign them to variables):

if (document.defaultView) {
    var cStyle = function(obj, prop) {
        var temp = document.defaultView.getComputedStyle(obj, "");
        return temp.getPropertyValue(prop);
    }
} else if (document.body.currentStyle) {
    var cStyle = function(obj, prop) {
        return obj.currentStyle[prop];
    }
}

You can now call cStyle like a normal function to get the computed value of any style property of any object.