How to programmatically check CSS styles for particular elements? [duplicate]

Question

I can easily check what CSS style an element has if it was applied inline:

<p style="color: red;">This is red</p>

The JS to read that color:

document.querySelector('p').style.color == 'red'

How can I check the CSS style of an element if that style was applied from an internal or external stylesheet?

Why do you want to do this? Trying to do this is normally a code smell. It indicates that you may be trying to use CSS styles as a way to maintain program state, which is generally not a good idea. Judicious use of classes and adding them and removing them can usually make trying to query the current style unnecessary. — user663031
– user663031, Commented Dec 20, 2016 at 19:37

Ori Drori · Accepted Answer · 2016-12-20 19:29:58Z

3

You can use window.getComputedStyle(). The returned value is a CSSStyleDeclaration, and you can access the properties directly using the dot notation or use .getPropertyValue('property name').

var p = document.querySelector('.demo');
var style = window.getComputedStyle(p);

console.log(style);

console.log('style.color ', style.color);

// or

console.log('getPropertyValue(\'color\')', style.getPropertyValue('color'));

.demo {
  color: red; 
}

<p class="demo">This is red</p>

edited Dec 20, 2016 at 19:29

answered Dec 20, 2016 at 19:20

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

timk260 · Accepted Answer · 2016-12-20 19:24:27Z

0

use jQuery css method to get the value of property for the first matched element. The following code will get the color property for the first p-tag in the document. Use an id on the element to select a specific tag.

var color = $("p").css("color");

answered Dec 20, 2016 at 19:24

timk260

1491 silver badge6 bronze badges

1 Comment

user663031 Over a year ago

We don't use jQuery any more.

Collectives™ on Stack Overflow

How to programmatically check CSS styles for particular elements? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related