CSS: Computed Style

By Xah Lee. Date: . Last updated: .

A “computed style” is all the styles that applies to the element, even if there's no CSS specified for that element.

For example, consider the color of a element, the element itself may not have a CSS color spec, but it inherit styles from parent element, or from browser's initial value for that property.

Find Computed Style by Browser Console

Use browser's web dev tool to find computed style of an element.

Firefox web dev tool 2013-07-10
Firefox web dev tool.

[see JS: How to Use Browser Console]

Get Computed Style by JavaScript

Use window.getComputedStyle(ele) and getPropertyValue( propName )

// get computed property value of propName of element ele
// version 2018-11-02

const getComputedS = ((ele, propName) => window.getComputedStyle(ele). getPropertyValue( propName ) );

CSS Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog