Is there a way of determining the “defined” vs. “computed” style property of an element?

by

I’m trying to determine if an absolutely-positioned element’s size is being determined by positioning or dimension.

E.g. an element with a left and width will have a computed right but getComputedStyle will simply report all three values. I want to be able to distinguish between an element whose width is computed from left and right vs. one whose width is defined, etc.

Now, I know that I can “experimentally” change a property, use getComputedStyle to see if something changes, and then restore the property, without the user seeing a “flicker” so this is one option.

E.g. if I want to see if an object’s width is defined I can try changing left and right independently to see whether changing on of them does not change computed width (in which case width is defined, but even this won’t tell me if the width is a result of the element’s content vs. a css rule

  • Can you not just read the style value and determine the answer with javascript? elem.style.right would be empty if not assigned

    – 

  • inspect the element in devtools?

    – 

  • 1

    @SpencerMay reading the style attribute won’t tell you what has been set thro’ a stylesheet.

    – 

  • @AHaworth is exactly right. Basically I’m looking for something that is like getComputedStyle() but returns only explicitly set values (from anywhere) and not computed values.

    – 

  • @James you can get this information (with difficulty) from the CSS inspector, but the whole point is to surface this information in an actual user interface.

    – 

Leave a Comment