How to get and extract matched css rules on dom-node?


Tags: javascript,css,dom,google-chrome-devtools

Problem :

I would like to know an easy way to get all the css rules and classes on a certain DOM node and the subtree programmatically.

Chrome Dev Tools

Inspecting the style of an element in the chrome dev tools returns 2 panels

  1. Computed Style
  2. Styles

The Styles-Panel has 3 different style categories:

  • element.style
  • Matched CSS Rules
  • inherited from ....

The function window.getMatchedCSSRules comes quite close to the panel Matched CSS Rules in the dev-tools. I want to iterate over an element and its children and add the matched css rules to a string.

This updated fiddle explains and demonstrates the expected and the unwanted result

Example:

<a class="one to many">
    <span class="even more">foo</span>
    <span class="way muchMore"> bar</span>
</a>

How can i get all the css-classes with the stylerules like this

a.one { color: red; }
.to { margin: 2em}

And so on. The following function comes quite close to the expected result:

// el = a DOM-Node document.getElementById(id);
function getCssText(el) {
    var cssText = "";
    var cssRuleList = window.getMatchedCSSRules(el, '');
    for (var i = 0; i < cssRuleList.length; i++) {
        cssText += cssRuleList[i].cssText + " ";
    }
    return cssText;
}

Alexander pointed to this discussion about window.getMatchedCSSRules() returning null

Does anyone have a plugin or a more sophisticated function for me to retrieve the css classes and the values of a domnode?



Solution :

What prevents you from mouse-selecting and copying (Ctrl-C, whatever) the contents of the "Matched CSS Rules" or "Computed Styles" section in the sidebar (am I missing the task you are trying to solve?)

There's a known issue with pasting the copied contents into well-known HTML-aware text editors (the CSS properties inside rules are rendered as a numbered list, which is actually a bug in the respective editors) but otherwise, if you want to manually grab a copy of all your matched CSS rules/computed style for a DOM element, this workflow should work for you.


    CSS Howto..

    How can I add an image to a
  • tag dynamically
  • How to have a multiline CSS horizontal scroll?

    Asp.Net how to apply a css style to all the control of it's kind

    How to “zoom”/“scale” in div's content with css or jquery?

    How can I add a border to the right side of this object?

    CSS: Adding border to button on hover. How avoiding a shifting of the following elements? [duplicate]

    how to put inline image css in ghost-blog?

    How do you vertically align the body tag of an HTML document?

    How do I apply a CSS to a clutter stage?

    How do I scale the size of the elements in my HTML according to screen size?

    How to prevent “jerking” of page in browser

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How do I align my navigation to the right without removing (display: inline;)?

    How to disable Bootstrap 3 collapse nav menu css

    How to fit textarea exactly inside a div - CSS

    How can I change the color of the last letter in an element?

    How to css this little button next to