[whatwg] New method for obtaining a CSS property
Brett Zamir
brettz9 at yahoo.com
Fri Jan 28 01:12:17 PST 2011
On 1/28/2011 3:33 PM, Ryosuke Niwa wrote:
> 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;
>
> }
Yes, mostly that would work too, yes, but again with some greater
ambiguity if someone say styled, "body > .myClass" as opposed to ".myClass".
Or, to piggy-back on what Boris suggested:
function getColor(className) {
var dummy = document.createElement('div');
dummy.className = className;
return getComputedStyle(dummy, null).getPropertyValue('color');
}
While this is not a frequent use case, I'll admit, this need to ensure
separation of concerns is, in my view, something fundamental enough to
call for a built-in method, despite the fact that there are a number of
ways this can be done.
Brett
More information about the whatwg
mailing list