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 a element.

Chrome browser web dev tool 2019-06-10 txzzv
Chrome browser web dev tool 2019-06-10 txzzv

[see JS: How to Use Browser Console]

Get Computed Style by JavaScript


window .getComputedStyle (node) .getPropertyValue ( propName )

/* [
xah_get_computed_style (node, propName)
return computed property value of string propName of element node
version 2019-06-10
 ] */
const xah_get_computed_style = ((node, propName) => window. getComputedStyle(node). getPropertyValue( propName ) );

// --------------------------------------------------
// test

const firstPara = document. getElementsByTagName ('p')[0];

const prop = "color";

console.log ( xah_get_computed_style(firstPara, prop) );

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





Box Model



Line Wrap, Justification

Box Decoration