How to get the ultimate, final calculated style value on an HTML element?

Question

How does one get the ultimate, final, after-inheritance style value for an HTML element in JavaScript? I already know that element.style only gets the inline styles, and that getComputedStyle() only does elementary transformations on the inline styles (it doesn't appear to be inheriting anything from the style sheets). How do I get the inherited style values?

I'd prefer not to use jQuery (since I know that a pure JavaScript solution is possible, though jQuery is already in use in my application). I don't know what the stylesheet configuration is ahead of time because the sheets are being compiled together with SASS.

My specific case is that I'm trying to get a business-defined color from the stylesheet for a canvas-based drawing task, and the colors are defined in the CSS. I'm currently trying to use code like the following to extract my entities.

var testElement = document.createElement("span");
var entity_type_color_table = {};
function getEntityTypeColor(entity_type) {
    if (!entity_type_color_table[entity_type]) {
        testElement.className = entity_type + "-color";
        entity_type_color_table[entity_type] = 
            document.defaultView.getComputedStyle(testElement, null)
            .getPropertyValue("color");
    }         
    return entity_type_color_table[entity_type];     
}

i think you might just want to use jQuery to solve this. by using .css(). Reason being that jQuery already takes care of alot of browser inconsistencies. — Puzzle84, Dec 04 '15 at 19:03
I noticed you're using `document.createElement('span');`. When I replace that with a proper DOM node (see: http://jsfiddle.net/12dsjur3/) it returns the color properly. Could that be the reason why you aren't seeing any values from `getComputedStyle`? — jeffjenx, Dec 04 '15 at 19:14
You know you could just read the specific style sheet's rules using document.styleSheets[0].cssRules — mattdevio, Dec 04 '15 at 19:18

Noah Freitas · Accepted Answer · 2015-12-04T19:18:23.497

3

You're not seeing any of the stylesheet styles because you haven't attached your test element to the document. After creating your testElement, doing:

document.body.appendChild(testElement);

Should suffice.

Alternatively, if having the test element attached permanently is a problem, you could attach and detach it in your test function:

if (!entity_type_color_table[entity_type]) {
    testElement.className = entity_type + "-color";
    document.body.appendChild(testElement);
    entity_type_color_table[entity_type] = 
        document.defaultView.getComputedStyle(testElement, null)
        .getPropertyValue("color");
    testElement.remove();
}

edited Dec 04 '15 at 19:18

answered Dec 04 '15 at 19:14

Noah Freitas

17,240
10
50
67

Precisely what I was thinking in my comment. – jeffjenx Dec 04 '15 at 19:15
Yep, that was it. Put it on the DOM somewhere, it works like a charm. Thank you for pointing that out. – TheHans255 Dec 04 '15 at 20:12

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

This question here may help: jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element as well as Can jQuery get all CSS styles associated with an element?

You can get external and inline styles by using document.styleSheets and as @Puzzle84 noted, jquery's .css()

edited May 23 '17 at 11:59

Community

1
1

answered Dec 04 '15 at 19:14

asharon.mori

105
2
9

How to get the ultimate, final calculated style value on an HTML element?

2 Answers2