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 can I instantly stop a CSS animation on hover?

    How to paste a style sheet into a new document window in a Rally app

    How to make two lines text inside list-item element of bootstrap? [closed]

    How to apply icons to links using css?

    How to wait for a video background in HTML until it finish and then view the contents of body section?

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How can I make an image carousel with only CSS?

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How do you put in percentage based margin to a CSS grid?

    how to display data in html

    How can I have a table with a set height but auto height cells

    How to set a background image in css?

    Showing and hiding content

    How can I embed a smartphone simulator in html5? [closed]

    how to use font awesome in own css?

    How to design a ordered list inside a selection drop down menu

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    How to select a td by position of its relative th?

    How can I change the font (family) for the labels in Chart.JS?

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    How to remove the double border bottom line below the breadcrumb

    IE css filter: adding black outline to text - how do I remove it?

    How do you control CSS styles from within the CMS interface in Zotonic?

    How to set the specific prefix for file-loader in webpack?

    How to prevent outside CSS from overriding web component styles

    How to get css value of an element inside array?

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to fix button position next to input when screen resizes

    How to scroll jQuery ui tabs?

    How to fix layout to browser window without scroll