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 :)

Lulu

As a note if you view source you can see the stripped attribute value still so hopefully there is some hook that is there for IE9. – Lulu

Why do you need to store a fake color value? Why don't you use a data-attribute instead? – Organism

Because we don't want to build out an attribute like ng-style. Most frameworks allow for string interpolation inside of the attribute's value it's only IE that is giving us a fit on style – Lulu

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.

Laise

Comments are not for extended discussion; this conversation has been moved to chat. – Wrongly

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.

Unblessed

No as mentioned we do not want to – Lulu

Answer 3

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

Sent

This does not work please make sure to try answers before suggedting – Lulu

@PWKad I updated my answer, please try and tell us if this helped – Sent

@PWKad: I don't really care about the points, but if you vote people down, and they still respond to you, at least check the answer and cancel your down vote – Sent

@PWKad I updated my answer to clarify my idea, it sure solves your problem with angular, as the value is passed to client. If you still think the question is not answered, feel free to explain your thoughts. – Sent

Actually all browsers will ignore styles that start with - and aren't acceptable style declarations. – Laise

Sure: An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors.. – Laise

@Sent As mentioned numerous times in this question this is not for Angular – Lulu

Answer 4

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.

Unblessed

This is not Angular so ng-style does nothing to help us here. – Lulu