getComputedStyle vs currentStyle with IE 9

Andrew Poulos

unread,

Feb 10, 2012, 7:02:12 AM2/10/12

to

I have a function like this to get the style of an element

function getElStyle(el, IEcssPropName, cssPropName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(el,
null).getPropertyValue(cssPropName);

} else if (el.currentStyle) {
return el.currentStyle[IEcssPropName];
}

return null;
}

To get, say, the background colour of an element I call

getElStyle(elem, "background-color", "backgroundColor");

Alas, IE 9 supports window.getComputedStyle but not camel-cased CSS
property names. So I tried this

function getElStyle(el, IEcssPropName, cssPropName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(el,
null).getPropertyValue(cssPropName) ||
document.defaultView.getComputedStyle(el,
null).getPropertyValue(IEcssPropName);

} else if (el.currentStyle) {
return el.currentStyle[IEcssPropName];
}

return null;
}

and it seems to work. Is there a better way?

Andrew Poulos

Thomas 'PointedEars' Lahn

unread,

Feb 10, 2012, 7:38:10 AM2/10/12

to

Andrew Poulos wrote:

> Alas, IE 9 supports window.getComputedStyle but not camel-cased CSS
> property names. So I tried this
>
> function getElStyle(el, IEcssPropName, cssPropName) {
> if (window.getComputedStyle) {
> return document.defaultView.getComputedStyle(el,
> null).getPropertyValue(cssPropName) ||
> document.defaultView.getComputedStyle(el,
> null).getPropertyValue(IEcssPropName);
>
> } else if (el.currentStyle) {
> return el.currentStyle[IEcssPropName];
> }
>
> return null;
> }
>
> and it seems to work. Is there a better way?

Yes.

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Andrew Poulos

unread,

Feb 10, 2012, 7:48:19 AM2/10/12

to

On 10/02/2012 11:38 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> Alas, IE 9 supports window.getComputedStyle but not camel-cased CSS
>> property names. So I tried this
>>
>> function getElStyle(el, IEcssPropName, cssPropName) {
>> if (window.getComputedStyle) {
>> return document.defaultView.getComputedStyle(el,
>> null).getPropertyValue(cssPropName) ||
>> document.defaultView.getComputedStyle(el,
>> null).getPropertyValue(IEcssPropName);
>>
>> } else if (el.currentStyle) {
>> return el.currentStyle[IEcssPropName];
>> }
>>
>> return null;
>> }
>>
>> and it seems to work. Is there a better way?
>
> Yes.

Good, could you tell what it is?

Andrew Poulos

Thomas 'PointedEars' Lahn

unread,

Feb 10, 2012, 7:55:38 AM2/10/12

to

Yes.

(This would actually be funny for me if it was not so disappointing.)

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>

Captain Paralytic

unread,

Feb 10, 2012, 8:37:19 AM2/10/12

to

Did you try googling:
cross browser getcomputedstyle

Andrew Poulos

unread,

Feb 10, 2012, 2:48:48 PM2/10/12

to

On 10/02/2012 11:55 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 10/02/2012 11:38 PM, Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> Alas, IE 9 supports window.getComputedStyle but not camel-cased CSS
>>>> property names. So I tried this
>>>>
>>>> function getElStyle(el, IEcssPropName, cssPropName) {
>>>> if (window.getComputedStyle) {
>>>> return document.defaultView.getComputedStyle(el,
>>>> null).getPropertyValue(cssPropName) ||
>>>> document.defaultView.getComputedStyle(el,
>>>> null).getPropertyValue(IEcssPropName);
>>>>
>>>> } else if (el.currentStyle) {
>>>> return el.currentStyle[IEcssPropName];
>>>> }
>>>>
>>>> return null;
>>>> }
>>>>
>>>> and it seems to work. Is there a better way?
>>> Yes.
>>
>> Good, could you tell what it is?
>
> Yes.
>
> (This would actually be funny for me if it was not so disappointing.)

Its disappointing to me as well.

Andrew Poulos

Thomas 'PointedEars' Lahn

unread,

Feb 10, 2012, 5:46:54 PM2/10/12

to

All you need to do is asking a *smart* question.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

Message has been deleted

Thomas 'PointedEars' Lahn

unread,

Feb 11, 2012, 5:55:04 AM2/11/12

to

Tim Streater wrote:

> Thomas 'PointedEars' Lahn <Point...@web.de> wrote:
>> Andrew Poulos wrote:
>> > On 10/02/2012 11:55 PM, Thomas 'PointedEars' Lahn wrote:
>> >> Andrew Poulos wrote:
>> >>> On 10/02/2012 11:38 PM, Thomas 'PointedEars' Lahn wrote:
>> >>>> Andrew Poulos wrote:

>> >>>>> […] it seems to work. Is there a better way?

>> >>>> Yes.
>> >>> Good, could you tell what it is?
>> >> Yes.
>> >> (This would actually be funny for me if it was not so disappointing.)
>> > Its disappointing to me as well.
>> All you need to do is asking a *smart* question.
>

> My advice, Andrew, is to tell him to fuck off. I have and have never
> regretted it.

You cannot miss what you never had in the first place.

Andrew Poulos

unread,

Feb 11, 2012, 7:13:54 AM2/11/12

to

On 11/02/2012 9:46 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 10/02/2012 11:55 PM, Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> On 10/02/2012 11:38 PM, Thomas 'PointedEars' Lahn wrote:
>>>>> Andrew Poulos wrote:
>>>>>> Alas, IE 9 supports window.getComputedStyle but not camel-cased CSS
>>>>>> property names. So I tried this
>>>>>>
>>>>>> function getElStyle(el, IEcssPropName, cssPropName) {
>>>>>> if (window.getComputedStyle) {
>>>>>> return document.defaultView.getComputedStyle(el,
>>>>>> null).getPropertyValue(cssPropName) ||
>>>>>> document.defaultView.getComputedStyle(el,
>>>>>> null).getPropertyValue(IEcssPropName);
>>>>>>
>>>>>> } else if (el.currentStyle) {
>>>>>> return el.currentStyle[IEcssPropName];
>>>>>> }
>>>>>>
>>>>>> return null;
>>>>>> }
>>>>>>
>>>>>> and it seems to work. Is there a better way?
>>>>> Yes.
>>>> Good, could you tell what it is?
>>> Yes.
>>>
>>> (This would actually be funny for me if it was not so disappointing.)
>>
>> Its disappointing to me as well.
>
> All you need to do is asking a *smart* question.

I think you are misleading me as it doesn't look like there's a better way.

One option I found is to put the currentStyle test first but that
doesn't really resolve the fact getComputedStyle will fail with IE 9 and
camel-cased CSS properties.

DM's recent tip only uses getComputedStyle and specifically excludes non
camel-cased CSS properties so his function will fail in every flavour of IE.

Andrew Poulos

Thomas 'PointedEars' Lahn

unread,

Feb 11, 2012, 8:41:37 AM2/11/12

to

Wrong on both accounts. For crying out loud, a *closely related* question
has been asked (presumably, *again*) on StackOverflow *yesterday*, and I
have commented on the other answers there, eventually referring to
JSX:css.js (which does not consider getPropertyValue() yet – as the
shorthand is optional, and potentially less efficient thanks to camel-casing
–, but soon):

<http://stackoverflow.com/questions/9216951/getting-value-of-a-css-
element/9216996>

Information about this subject can be *easily* found with Google, for
example:

<http://lmgtfy.com/?q=currentStyle+getComputedStyle+IE>¹

(Feel stupid now? Because you should.)

> One option I found is to put the currentStyle test first

It is wrong to put the `currentStyle' test and branch first. Proprietary
approaches should only be the fallback or alternative to standards-compliant
ones. Not only because the former are more error-prone, but also because
they can be removed easier once they are not needed anymore.

> but that doesn't really resolve the fact getComputedStyle will fail with
> IE 9 and camel-cased CSS properties.

Wrong (just tested again). getComputedStyle() "fails" with IE
9(.0.8112.16421 on Windows 7) in *Compatibility* Mode, but not in Standards
Mode, and it "fails" in IE < 9, of course.

<http://ie.microsoft.com/testdrive/HTML5/getComputedStyle/>

(That URL is from the first page of Google hits. "HTML5" is M$'s marketing
department talking, though; this method is part of W3C DOM Level 2 *Style*,
and HTML5 refers to DOM Level 3 *Events* only.

Related URLs:

<http://en.wikipedia.org/wiki/Internet_Explorer_9#DOM>
<http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx>)

*A little bit* of browsing through the MSDN Library (using the tree view on
the left-hand side in Classic View) shows:

<http://msdn.microsoft.com/en-us/library/ff975168(VS.85).aspx>

PointedEars
___________
¹ <http://www.google.com/search?q=currentStyle+getComputedStyle+IE&filter=0>
--
When all you know is jQuery, every problem looks $(olvable).

Thomas 'PointedEars' Lahn

unread,

Feb 11, 2012, 9:20:10 AM2/11/12

to

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>> I think you are misleading me as it doesn't look like there's a better
>> way.
>
> Wrong on both accounts. For crying out loud, a *closely related* question
> has been asked (presumably, *again*) on StackOverflow *yesterday*, and I
> have commented on the other answers there, eventually referring to
> JSX:css.js (which does not consider getPropertyValue() yet – as the
> shorthand is optional, and potentially less efficient thanks to
> camel-casing –, but soon):

> […]

>> but that doesn't really resolve the fact getComputedStyle will fail with
>> IE 9 and camel-cased CSS properties.
>
> Wrong (just tested again). getComputedStyle() "fails" with IE
> 9(.0.8112.16421 on Windows 7) in *Compatibility* Mode, but not in
> Standards Mode, and it "fails" in IE < 9, of course.

Well, *partially* wrong. getComputedStyle() does not fail with IE 9 per se.
But it does fail even in Standards Mode with camel-cased CSS properties
because getPropertyValue() expects the *real* CSS property name. It is
specified so in the W3C DOM Level 2 Style Specification:

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration>

You MUST *only* camel-case the property name (e. g., "marginTop" instead of
"margin-top") when you are accessing style object properties:

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties>

Hence my assumption that the use of getPropertyValue() might turn out to be
more efficient than using the optional shorthand with the camel-cased
property name.

PointedEars
--
> If you get a bunch of authors […] that state the same "best practices"
> in any programming language, then you can bet who is wrong or right...
Not with javascript. Nonsense propagates like wildfire in this field.
-- Richard Cornford, comp.lang.javascript, 2011-11-14

Thomas 'PointedEars' Lahn

unread,

Feb 11, 2012, 9:21:52 AM2/11/12

to

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>> I think you are misleading me as it doesn't look like there's a better
>> way.
>
> Wrong on both accounts. For crying out loud, a *closely related* question
> has been asked (presumably, *again*) on StackOverflow *yesterday*, and I
> have commented on the other answers there, eventually referring to
> JSX:css.js (which does not consider getPropertyValue() yet – as the
> shorthand is optional, and potentially less efficient thanks to
> camel-casing –, but soon):

> […]

>> but that doesn't really resolve the fact getComputedStyle will fail with
>> IE 9 and camel-cased CSS properties.
>
> Wrong (just tested again). getComputedStyle() "fails" with IE
> 9(.0.8112.16421 on Windows 7) in *Compatibility* Mode, but not in
> Standards Mode, and it "fails" in IE < 9, of course.

Well, *partially* wrong. getComputedStyle() does not fail with IE 9 per se.
But it does fail even in Standards Mode with camel-cased CSS properties
because getPropertyValue() expects the *real* CSS property name. It is
specified so in the W3C DOM Level 2 Style Specification:

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration>

You MUST *only* camel-case the property name (e. g., "marginTop" instead of
"margin-top") when you are accessing style object properties:

<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties>

Hence my assumption that the use of getPropertyValue() might turn out to be
more efficient than using the optional shorthand with the camel-cased

property name, especially as you need to map "float" to "cssFloat" or
"styleFloat" aso.

Andrew Poulos

unread,

Feb 12, 2012, 3:04:11 AM2/12/12

to

On 12/02/2012 1:21 AM, Thomas 'PointedEars' Lahn wrote:
> Thomas 'PointedEars' Lahn wrote:
>
>> Andrew Poulos wrote:
>>> I think you are misleading me as it doesn't look like there's a better
>>> way.
>>
>> Wrong on both accounts. For crying out loud, a *closely related* question
>> has been asked (presumably, *again*) on StackOverflow *yesterday*, and I

So, I don't normally read StackOverflow.

>> have commented on the other answers there, eventually referring to
>> JSX:css.js (which does not consider getPropertyValue() yet – as the
>> shorthand is optional, and potentially less efficient thanks to
>> camel-casing –, but soon):
>> […]
>>> but that doesn't really resolve the fact getComputedStyle will fail with
>>> IE 9 and camel-cased CSS properties.
>>
>> Wrong (just tested again). getComputedStyle() "fails" with IE
>> 9(.0.8112.16421 on Windows 7) in *Compatibility* Mode, but not in
>> Standards Mode, and it "fails" in IE< 9, of course.
>
> Well, *partially* wrong. getComputedStyle() does not fail with IE 9 per se.
> But it does fail even in Standards Mode with camel-cased CSS properties
> because getPropertyValue() expects the *real* CSS property name. It is
> specified so in the W3C DOM Level 2 Style Specification:
>
> <http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration>
>
> You MUST *only* camel-case the property name (e. g., "marginTop" instead of
> "margin-top") when you are accessing style object properties:
>
> <http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties>
>
> Hence my assumption that the use of getPropertyValue() might turn out to be
> more efficient than using the optional shorthand with the camel-cased
> property name, especially as you need to map "float" to "cssFloat" or

> "styleFloat" also.

I tested the following

1.
document.defaultView.getComputedStyle(el,
null).getPropertyValue("background-color")

2.
document.defaultView.getComputedStyle(el, null)["backgroundColor"]

3. document.defaultView.getComputedStyle(el,
null).getPropertyValue("backgroundColor")

4.
document.defaultView.getComputedStyle(el, null)["background-color"]

5.
el.currentStyle["background-color"]

6.
el.currentStyle["backgroundColor"]

where 'el' is a DIV with a bg colour set and this is what I got:

IE 9
----
1. correct colour
2. correct colour
3. ""
4. correct colour
5. correct colour
6. correct colour

Opera 11.61
-----------
1. correct colour
2. correct colour
3. ""
4. undefined
5. undefined
6. correct colour

Safari 5.1.2
------------
1. correct colour
2. correct colour
3. null
4. correct colour
5. error
6. error

Firefox 10.0.1
--------------
1. correct colour
2. correct colour
3. ""
4. undefined
5. error
6. error

Chrome 17.0.963.46
------------------
1. correct colour
2. correct colour
3. null
4. correct colour
5. error
6. error

1 and 2 appear to be the most consistent. Thanks for the time you spent
helping me on this.

Andrew Poulos

Thomas 'PointedEars' Lahn

unread,

Feb 12, 2012, 4:58:40 AM2/12/12

to

Andrew Poulos wrote:

> On 12/02/2012 1:21 AM, Thomas 'PointedEars' Lahn wrote:
>> Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> I think you are misleading me as it doesn't look like there's a better
>>>> way.
>>> Wrong on both accounts. For crying out loud, a *closely related*
>>> question has been asked (presumably, *again*) on StackOverflow
>>> *yesterday*, and I
>
> So, I don't normally read StackOverflow.

OMG. Google is your friend!

> 1.
> document.defaultView.getComputedStyle(el,
> null).getPropertyValue("background-color")

Standards-compliant.

> 2.
> document.defaultView.getComputedStyle(el, null)["backgroundColor"]
>
> 3. document.defaultView.getComputedStyle(el,
> null).getPropertyValue("backgroundColor")

Not standards-compliant, not supposed to work.

> 4.
> document.defaultView.getComputedStyle(el, null)["background-color"]

Not standards-compliant, not supposed to work.

> 5.
> el.currentStyle["background-color"]

MSHTML-proprietary, but not supposed to work this way.

> 6.
> el.currentStyle["backgroundColor"]

MSHTML-proprietary; supposed to work *there*.

> where 'el' is a DIV with a bg colour set and this is what I got:
>
> IE 9
> ----
> 1. correct colour
> 2. correct colour
> 3. ""

All as expected.

> 4. correct colour
> 5. correct colour

Both unexpected, but then again I never waste time testing *wrong*
approaches.

> 6. correct colour

As expected.

> Opera 11.61
> -----------
> 1. correct colour
> 2. correct colour
> 3. ""
> 4. undefined
> 5. undefined
> 6. correct colour

All as expected. Opera has a long history of emulating MSHTML while trying
to be standards-compliant at the same time.

> Safari 5.1.2
> ------------
> 1. correct colour
> 2. correct colour
> 3. null
> 4. correct colour

All as expected.

> 5. error
> 6. error

Of course it gives an error in WebCore. It's MSHTML-proprietary, for
goodness' sake!

> Firefox 10.0.1
> --------------
> 1. correct colour
> 2. correct colour
> 3. ""
> 4. undefined

All as expected.

> 5. error
> 6. error

See above. However, you have neglected to test potential differences
between Standards Compliance and Quirks Mode in all cases. It is possible
that `currentStyle' is available in Gecko's Quirks Mode as is
`document.all'.

> Chrome 17.0.963.46
> ------------------
> 1. correct colour
> 2. correct colour
> 3. null
> 4. correct colour
> 5. error
> 6. error

Chrome's/Chromium's layout engine is (based on) WebCore. See above.

> 1 and 2 appear to be the most consistent.

Few surprises (t)here.

> Thanks for the time you spent helping me on this.

Hm, hm.

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

Thomas 'PointedEars' Lahn

unread,

Feb 12, 2012, 4:59:46 AM2/12/12

to

Andrew Poulos wrote:

> On 12/02/2012 1:21 AM, Thomas 'PointedEars' Lahn wrote:
>> Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> I think you are misleading me as it doesn't look like there's a better
>>>> way.
>>> Wrong on both accounts. For crying out loud, a *closely related*
>>> question has been asked (presumably, *again*) on StackOverflow
>>> *yesterday*, and I
>
> So, I don't normally read StackOverflow.

OMG. Google is your friend!

> 1.
> document.defaultView.getComputedStyle(el,
> null).getPropertyValue("background-color")

Standards-compliant.

> 2.
> document.defaultView.getComputedStyle(el, null)["backgroundColor"]

Standards-compliant (but optional).

> 3. document.defaultView.getComputedStyle(el,
> null).getPropertyValue("backgroundColor")