javascript - Get the list of all css styles applied to a specific element - Stack Overflow

admin管理员组

文章数量:1349221

Is there any way to get the list of only user-defined puted 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>

Is there any way to get the list of only user-defined puted 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 puted style applied to an element not the whole bunch of puted 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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 3, 2016 at 12:25 Raj asked Feb 2, 2016 at 14:28 RajRaj 57055 silver badges1515 bronze badges 2

• There is no crossbrowser solution that also works with IE properly though. – seahorsepip Commented Feb 2, 2016 at 14:36
• You may need a CSS parser like github./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 plicated. @Himanshu's answer may eliminate the need for a parser. – tmslnz Commented Jan 17, 2017 at 12:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The method you're looking for is:

window.getComputedStyle()

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

http://developer.mozilla/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 putation 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');

I've been looking for an answer to this question too. I have e 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/en/docs/Web/CSS/unset#Browser_patibility

本文标签： javascriptGet the list of all css styles applied to a specific elementStack Overflow