CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raj
Raj

Reputation: 570

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

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.

Upvotes: 7

Views: 4389

Answers (2)

Himanshu
Himanshu

Reputation: 399

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

Upvotes: 4

Rounin
Rounin

Reputation: 29521

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');

Upvotes: 6

Related Questions