How to get cascaded style value or determine whether the actual value was computed?

Question

I need to get a cascaded style value of an element (not the computed one), or to determine whether the actual value was computed or not.

For example, if I have an element with css rule width: 100%, I want to get the value 100% and not the actual pixels value, or just to know that the actual value was computed.

I know that I can get it using elem.currentStyle, and I also found a way in Chrome to find it using document.defaultView.getMatchedCSSRules().

Does anyone know a way to get it in other browsers?

given that `getMatchedCSSRules()` has been removed, to do this without using developer tools will mean implementing it yourself. There's a good start over in [this answer](https://stackoverflow.com/a/22638396/361684), with caveats noted in the comments. — gilly3, Jul 14 '21 at 22:23

score 1 · Answer 1 · answered Sep 28 '16 at 13:37

1

At this point I don't think there is a built-in way to do that in browsers other than IE: getComputedStyle will always just return the used value for those properties, like you said.

answered Sep 28 '16 at 13:37

vinntec

455
1
4
11

score 1 · Answer 2 · answered Oct 24 '16 at 12:28

1

What about calculating the value yourself? Query the calculated width of the wanted element and the calculated width af the parent element and then do some math to get the percentage-value? percentageValue = 100% * widthOfWanted / widthOfContainer

answered Oct 24 '16 at 12:28

Niedermann IT-Dienstleistungen

31
4

Yes, I think this is the most elegant solution. Take a look at [this answer here](https://teamtreehouse.com/community/pixel-to-percentage-conversion) to understand the technique about unit conversions and implement it for your needs – Anton Koning Oct 24 '16 at 12:53

score -1 · Answer 3 · answered Jun 18 '11 at 00:42

// The css argument in this example must be a css-style string, not a camelCase string.

function deepCss(who, css, ps){
    var sty, dv= document.defaultView;
    // IE8 and below
    if(document.body.currentStyle){
        sty= css.replace( /\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        return who.currentStyle[sty];
    }
    // everyone else
    if(dv){
        dv= document.defaultView.getComputedStyle(who, ps);
        return dv.getPropertyValue(css);
    }
    return '';
}

deepCss(document.body, 'background-color')

For chrome and firefox it will return the actual assigned value, and not the defined value, i.e. for element with 'width:100%' it will return the actual computed pixels, and not the defined '100%' value. — Andy, Jun 18 '11 at 01:20

score -2 · Answer 4 · answered Jun 17 '11 at 23:22

-2

best route would be to use a browser-indepent api library like jQuery

$(element).css('width') // jquery has a single function that returns a consistent value no matter which browser is in use.

answered Jun 17 '11 at 23:22

colinross

2,075
13
10

1

I know jquery. It returns the value in pixels - it doesn't return the relative value which was set. for an element with width:100% it won't return '100%' – Andy Jun 18 '11 at 01:14

How to get cascaded style value or determine whether the actual value was computed?

4 Answers4