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

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

  • How to change and maintain multiple color themes at runtime with css?
  • Applying a % style binding with knockout via function not working
  • Can I stop .NET eating IDs?
  • Rendering box shadow around unconventional shapes with HTML/CSS
  • CSS3 transition effect with onclick
  • Get ID of draggable element
    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?

  • Select dropdown fit width to current selection
  • “Show full site” button to bypass css media queries
  • How to solve jquery ui / firefox bug in state button with removeClass?
  • Change attributes of animated elements dynamically
  • Can I specify two attribute at once in D3?
  • Moving Circle to Top of Border With CSS
  • 2 Solutions collect form web for “How to get and extract matched css rules on dom-node?”

    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.

    In the ‘Elements’ tab of the dev tools in chrome, if you select any particular node, it displays all the matched Style rules in the panel to the right (both individually matched rules, and an overall computed style for the node).