CODEWITHSUNDEEP
javascriptcss
user187676
user187676

Reputation:

Distinguish between used and computed values returned from getComputedStyle

The MDN documentation for getComputedStyle states

The values returned by getComputedStyle are known as resolved values. These are usually the same as the CSS 2.1 computed values, but for some older properties like width, height or padding, they are instead the used values.

Is there a way to only get the computed values without the used ones?

My use case is this:

Take for instance a body element. The browsers width is currently 600px. If you call getComputedStyle on the body element, the style returned would contain width: 600px.

Resize the browser and the width will be different again, although the "correct" value should probably be auto.

I'd need the returned style to be idempotent, meaning that I can set the style back on the element without changing some values (like width) to fixed values.

Upvotes: 4

Views: 295

Answers (1)

joews
joews

Reputation: 30340

For a given element and style property you would need the first of:

  1. A value that has been explicitly applied to an element (through the style attribute or CSS)
  2. The browser's default value for that property

You cannot do that reliably because the CSS spec does not provide a way to access the browser's default CSS rules.

Upvotes: 1

Related Questions