How to get style attribute value before IE9 strips it

Question

I'm trying to grab the value of the style attribute before IE9-10 strips invalid values out. So far I've tried every variation of the following -

$0.attributes.style $0.style $0.getAttribute('style')

But it seems if I try to set an invalid value I cannot get access to it -

<div style="display: none; color: ${fake-value}">

</div>

All of the above would only return display: none since IE9-10 strips out the invalid values.

As a note I have tried tons of variations so if it is not possible that is fine but have you tried or can you try answers don't help much unless they are confirmed to do something :)

Answer 1

Unfortunately, due to the manner in which IE9 implements the CSS Object Model specification, this is not possible.

If we take a look at the specification, we can assume the following is what happens (emphasis mine):

6.7.1 Parsing CSS Values

To parse a CSS value value for a given property means to follow these steps:

• Let list be the value returned by invoking parse a list of component values from value.

• Match list against the grammar for the property property in the CSS specification.

• If the above step failed, return null.

• Return list.

Since your custom color value does not match against the grammar for the color property, IE returns null, essentially ignoring the property on parse, before it is displayed in the DOM.

---

Although you have mentioned that you don't want to, I recommend again that you use a data attribute instead, which will provide you with a cross-platform solution:

<div style="display: none;" data-color="${fake-value}">

---

A further alternative, if you really cannot bring yourself to use data attributes, is to view the source of the page programatically and parse it for your specified value. I do not recommend this, but if this is an avenue you wish to explore, you can find a related question here.

---

Update:

Interestingly, if we look at the DOM spec for CSS Style Declarations we find this:

While an implementation may not recognize all CSS properties within a CSS declaration block, it is expected to provide access to all specified properties in the style sheet through the CSSStyleDeclaration interface

So as an update on my previous answer, I speculate that IE9 is incorrectly interpreting the specification - using the CSSOM return null implementation (or something akin to it) during DOM parsing, instead of the intended DOM implementation.

This explains why you get the expected outcome in other browsers.