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.

Answer 2

Can you not use a custom attribute on your element to hold the "invalid" data? Like <element data-custom-attribute="some invalid stuff"></element>.

And then maybe using Javascript you could work with that and add it to the style instead.

Answer 3

Hmm...I think you need to use ng-style for that element. Ng-style will be evaluated differently and will fill the element's style with the proper value after that. Usually you put agular evaluated elements in their corresponding angular directives. In your case, that's ng-style.

For example <element style="properStyle" ng-style="scopeVariableContainingMoreStyle"></element> will add your proper style and then the evaluated style.

Answer 4

This is completely Out of the Box, but if all you need is to read the property, why don't you use outerHTML and get the value from there, something like:

var a = document.getElementById('myDiv').outerHTML;
var i = a.search('color:');
var e = a.lastIndexOf('"');
var result = a.substr(i+6,e - (i+6));
alert(result);

Edit 1: As the previous answer didn't work, I tried some other alternatives, and the only way i was able to add something to the style tag and ie actually kept it was this:

style="display:none; -ms-custom: test;"

Edit 2 if you need to add a custom style that isn't stripped by IE, you add -ms- before it, only IE will read it since it's -ms so it's safe