How to get CSS styles from an element with JavaScript

published: 27 Jun 2022

2 min read

In JavaScript, sometimes, you might want to retrieve CSS styles applied to an element through inline styles or external style sheets. There are various ways available to do this, depending on whether you want to fetch inline styles or rendered styles.

Getting Inline Styles

In vanilla JavaScript, the DOM style property is used to get the styles applied to an HTML element using the style attribute.

Let us say we have the following HTML element:

<button id='clickMe'>Click Me</button>

The following example shows how to get the style information from the above example:

const btn = document.getElementById('clickMe');
 
// pint color & font weight properties
console.log(btn.style.color); // red
console.log(btn.style.fontWeight); // bold

However, the style property only works for the inline styles defined using the style attribute. If you try to access a property not defined as an inline style rule, let us say the backgroundColor, a null value will be returned:

console.log(btn.style.backgroundColor); // null

The style property is not really useful to get style information that comes from elsewhere, such as the style rules defined using the <style> elements, or external style sheets.

Getting Rendered Styles

To get the actual CSS properties values that were used to render an HTML element, you can use the getComputedStyle() method. This method works for everything: inline styles, external style sheets, and browser defaults.

Let us say you have the following embedded <style> element that defines style rules for the above button:

<style>
    button {
        background-color: yellow;
        text-align: center;
        height: 20px;
        width: 100px;
    }
</style>

The getComputedStyle() method is always called on the window with the element as a parameter, and returns an object of properties:

const btn = document.getElementById('clickMe');
 
// get all rendered styles
const styles = window.getComputedStyle(btn);

Now you can access any CSS property directly just like you'd have done with the style property. For example, to access the background-color, you can do:

const backgroundColor = styles.backgroundColor; // rgb(255, 255, 0)

To get the rendered height and width of the element regardless of whether or not it was defined, just do the following:

const height = styles.height; // 20px
const width = styles.width; // 100px

Alternatively, you can also use the getPropertyValue() method on the styles object to access a CSS property. It accepts the actual name of the CSS property and not the one used for JavaScript:

const fontWeight = styles.getPropertyValue('font-weight'); // 700

Note: The value 700 is equivalent to bold for the CSS property font-weight. Similarly, rgb(255, 255, 0) is just a RGB value which is same as yellow.

The getComputedStyle() method is very useful to get the actual CSS properties that were used by the browser to render the element. It works in all modern and old browsers including IE 9 and higher.

Finally, the getComputedStyle() method only works for getting styles. You can not use it to set a specific style to an HTML element. To set CSS properties, you should always use the DOM style property, I have explained in an earlier article.

Getting Styles from Pseudo Elements

CSS pseudo-elements are extremely useful to style parts of an element without the need for additional HTML elements.

To get style information from pseudo-elements, you need to pass in the name of the pseudo-element as a second argument to the getComputedStyle() method.

Let us say we have the following <p> element:

<p>Learn JavaScrit for free!</p>

Here is the CSS ::first-letter pseudo element applied to the above paragraph:

.tip::first-letter {
  color: green;
  font-size: 22px;
}

To retrieve the color property of the .tip::first-letter, you should use the following JavaScript code snippet:

const tip = document.querySelector('.tip');

// retrieve all styles
const styles = window.getComputedStyle(tip, '::first-letter');

// get color
console.log(styles.color); // rgb(0, 128, 0)

Summary

In this article, we looked at different ways to get CSS styles from an element using JavaScript. You should use:

The DOM style property to retrieve inline styles applied to an element using the style attribute.
The window.getComputedStyle() method to retrieve computed styles applied to an element through <style> elements and external style sheets. To get pseudo-elements CSS styles, you need to pass the name of the pseudo-element as a second parameter.

Are we missing something? Help us improve this article. Reach out to us.

How to get CSS styles from an element with JavaScript

Getting Inline Styles

In vanilla JavaScript, the DOM style property is used to get the styles applied to an HTML element using the style attribute.

Let us say we have the following HTML element:

<button id='clickMe'>Click Me</button>

The following example shows how to get the style information from the above example:

const btn = document.getElementById('clickMe');
 
// pint color & font weight properties
console.log(btn.style.color); // red
console.log(btn.style.fontWeight); // bold

console.log(btn.style.backgroundColor); // null

The style property is not really useful to get style information that comes from elsewhere, such as the style rules defined using the <style> elements, or external style sheets.

Getting Rendered Styles

Let us say you have the following embedded <style> element that defines style rules for the above button:

<style>
    button {
        background-color: yellow;
        text-align: center;
        height: 20px;
        width: 100px;
    }
</style>

The getComputedStyle() method is always called on the window with the element as a parameter, and returns an object of properties:

const btn = document.getElementById('clickMe');
 
// get all rendered styles
const styles = window.getComputedStyle(btn);

Now you can access any CSS property directly just like you'd have done with the style property. For example, to access the background-color, you can do:

const backgroundColor = styles.backgroundColor; // rgb(255, 255, 0)

To get the rendered height and width of the element regardless of whether or not it was defined, just do the following:

const height = styles.height; // 20px
const width = styles.width; // 100px

Alternatively, you can also use the getPropertyValue() method on the styles object to access a CSS property. It accepts the actual name of the CSS property and not the one used for JavaScript:

const fontWeight = styles.getPropertyValue('font-weight'); // 700

Note: The value 700 is equivalent to bold for the CSS property font-weight. Similarly, rgb(255, 255, 0) is just a RGB value which is same as yellow.

The getComputedStyle() method is very useful to get the actual CSS properties that were used by the browser to render the element. It works in all modern and old browsers including IE 9 and higher.

Getting Styles from Pseudo Elements

CSS pseudo-elements are extremely useful to style parts of an element without the need for additional HTML elements.

To get style information from pseudo-elements, you need to pass in the name of the pseudo-element as a second argument to the getComputedStyle() method.

Let us say we have the following <p> element:

<p>Learn JavaScrit for free!</p>

Here is the CSS ::first-letter pseudo element applied to the above paragraph:

.tip::first-letter {
  color: green;
  font-size: 22px;
}

To retrieve the color property of the .tip::first-letter, you should use the following JavaScript code snippet:

const tip = document.querySelector('.tip');

// retrieve all styles
const styles = window.getComputedStyle(tip, '::first-letter');

// get color
console.log(styles.color); // rgb(0, 128, 0)

Summary

In this article, we looked at different ways to get CSS styles from an element using JavaScript. You should use:

The DOM style property to retrieve inline styles applied to an element using the style attribute.
The window.getComputedStyle() method to retrieve computed styles applied to an element through <style> elements and external style sheets. To get pseudo-elements CSS styles, you need to pass the name of the pseudo-element as a second parameter.