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');

Get CSS styles of an element

See also