Get the list of all css styles applied to a specific element

Question

Is there any way to get the list of only user-defined computed css styles applied to a specific html element. Styles can be applied in any fashion available now either by external css file or embedded/inline style.

.p1{font-size:14px; line-height:20px;}

<style>
  .p1{ line-height:18px; color:green;}
</style>
<p class="p1" style="color:red;">Some Paragraph</p>

Now the list I require to have, is the only user-defined computed style applied to an element not the whole bunch of computed styles containing blanks/null/default-values as provided by window.getComputedStyle()

just to be more precise on my question, I'd like to put a scenario where I visit a site first-time and I want to use developer toolbar to get the only user-defined styles programmatically (or by writing some scripts on console). So taking this scenario in mind, the final output i require should be-

{
  'color':'red',
  'line-height' : '18px',
  'font-size' : '14px'  
}

Please correct me on my query or any mistake in explaination, if needed.

There is no crossbrowser solution that also works with IE properly though. — seahorsepip, Feb 02 '16 at 14:36
You may need a CSS parser like https://github.com/reworkcss/css, figure out element's and inherited styles, reducing them to one list, then diffing that with whatever `getComputedStyle()` returns. Sounds – _and I believe it is_ – very complicated. @Himanshu's answer may eliminate the need for a parser. — tmslnz, Jan 17 '17 at 12:06

Rounin · Answer 1 · 2016-02-02T15:14:57.137

The method you're looking for is:

window.getComputedStyle()

See: Mozilla Developer Network (MDN) on Window.getComputedStyle();

http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

Based on the markup and styles in your question:

var para1 = document.getElementsByClassName('p1')[0];
var para1Styles = window.getComputedStyle(para1);

para1Color = para1Styles.getPropertyValue('color'); // red
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px

The same method will also allow you to pull style property values from pseudo-elements, by declaring the second (optional) argument.

eg.

var para1AfterStyles = window.getComputedStyle(para1, ':after');

Thanks for you help! but perhaps my query wasn't much specific to the subject. So I've update the query and would like to have your views or reply once again as above code doesn't fit to what i expect. — Raj, Feb 03 '16 at 12:29

score 4 · Answer 2 · answered Jan 17 '17 at 11:49

I've been looking for an answer to this question too. I have come up with a solution but it is kinda hackish. It does solve the problem though somewhat.

function getAppliedComputedStyles(element, pseudo) {
    var styles = window.getComputedStyle(element, pseudo)
    var inlineStyles = element.getAttribute('style')

    var retval = {}
    for (var i = 0; i < styles.length; i++) {
        var key = styles[i]
        var value = styles.getPropertyValue(key)

        element.style.setProperty(key, 'unset')

        var unsetValue = styles.getPropertyValue(key)

        if (inlineStyles)
            element.setAttribute('style', inlineStyles)
        else
            element.removeAttribute('style')

        if (unsetValue !== value)
            retval[key] = value
    }

    return retval
}

Let me know if it helps.

It uses css unset property value which is supported only in modern browsers. https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility

Get the list of all css styles applied to a specific element

2 Answers2