[whatwg] New method for obtaining a CSS property

[Ryosuke Niwa]

On Wed, Jan 26, 2011 at 10:23 PM, Brett Zamir <brettz9 at yahoo.com> wrote:

> I'll give a more concrete example, but I did state the problem: separation
> of concerns, and the data I want, getting a CSS property for a given
> selector.
>
> For example, we want the designer guy to be able to freely change the
> colors in the stylesheet for indicating say a successful transition (green),
> an error (red), or waiting (yellow) for an Ajax request. The JavaScript girl
> does not want to have to change her code every time the designer has a new
> whim about making the error color a darker or lighter red, and the designer
> is afraid of getting balled out for altering her code improperly. So the
> JavaScript girl queries the ".error" class for the "background-color"
> property to get whatever the current error color is and then indicates to an
> animation script that "darkred" should be the final background color of the
> button after the transition. The retrieval might look something like:
>
> document.getCSSPropertyValue(".error",  "background-color");  // 'darkred'
>
> While the JavaScript would choose the intermediate RGB steps to get there
> in the fashion desired by the developer.
>
> Yes, there are CSS transitions, or maybe SVG, but this is for cases where
> you want control tied to JavaScript.
>

It sounds like all you want to do is:

function getColor(className) {

var dummy = document.createElement('div');
dummy.className = className;
document.body.appendChild(dummy);
var color = dummy.style.backgroundColor;
document.body.removeChild(dummy);
return color;

}

- Ryosuke