Get CSS styles of an element

We can get all CSS styles via the getComputedStyle method:

const styles = window.getComputedStyle(ele, null);

From there, it's easy to access the value of specific style:

// Get the background color
const bgColor = styles.backgroundColor;

For the style that has a vendor prefix which starts with a hyphen (-), we can get the style value by passing the style:

const textSizeAdjust = styles['-webkit-text-size-adjust'];

The getPropertyValue method produces the same result:

const bgColor = styles.getPropertyValue('background-color');

// Or turn the parameter to camelCase format:
const bgColor = styles.getPropertyValue('backgroundColor');

See also

• Check if an element is scrollable
• Get the default value of a css property
• Measure the width of given text of given font
• Resize columns of a table
• Resize the width of a text box to fit its content automatically
• Scale a text to fit inside of an element
• Set css style for an element