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


Tags: javascript,css,css3,inline-styles

Problem :

This question already has an answer here:

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?



Solution :

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>


    CSS Howto..

    How to clear the parent css

    How to make beatiful select lists?

    How to solve this (seemingly simple) formatting problem in CSS?

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    How to create a speech bubble in css?

    How do I get pictures side by side (responsive)

    How to show parts of sprite with CSS keyframes to create animation?

    How know CSS version - ASP.NET - VS Community 2013

    How to DRY up on SASS transitions with multiple elements?

    How to position text over an image in css

    How to make div access the remaining space without using fixed height values?

    How to style input type file using css

    How to select all a pseudo-classes in CSS?

    Button transition using javascript and css, how to temporarily disable the transition

    how to place css div container “text-align: center ;”

    How do I spilt the footer into different widths?

    How to apply a single line of CSS to an external iframe?

    how to use pseudo-classes (like after, before) inline in CSS

    How to include css file in a JavaFx Spring application

    How to keep line breaks when using .text() method for jQuery?

    How to stretch parent div to fit children div?

    How to accomplish onHover event without a second image

    How to edit Skype contact me button CSS?

    CSS: show triangles in a row

    CSS - How to make footer stay at the bottom of the page?

    How to manage css left property for fixed div

    CSS: How to float:right and center

    How to 'append' the background with more styles in CSS?

    How to put more than one class in css not() selector?

    Use css to not show the text box