[whatwg] New method for obtaining a CSS property

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

Received on Friday, 28 January 2011 01:12:17 UTC