如何在JavaScript中获取错误的CSS属性值？

Question

I need to get original value of a CSS property, even if the value is incorrect.

 var el = document.getElementById('value'); var style = window.getComputedStyle(el); el.insertAdjacentText('afterbegin', style.getPropertyValue('color')); 

 #value { color: foo; } 

 <p> Property <code>color</code> value (should be <em>foo</em>): <code id="value"></code> </p> 

In the code above I used foo as a value of color property, which obviously is incorrect — there's no color with that name, nor is it accepted color format. However, when I read that value in JavaScript, I get rgb(0, 0, 0) instead of foo .

I want to get original value, as it appears in stylesheet. How can I achieve that?

http://codepen.io/xerif/pen/NpqKBO/

Answer 1

You have 2 separate issues

The first is that there are numerous different formats to set colors but browsers will only return one format for getComputedStyle .The format returned may not even be consistent cross browser. For example one browser might return rgb and another rgba

The other is that when an invalid value is provided in a css rule it won't be set by the browser rendering engine and therefore is not accessible in the dom.

What you are asking can't be done