How to Find the Origin of CSS Rules Applied to an Element in JavaScript?

Finding the Origin of CSS Rules Applied to an Element

When a browser renders a web page, it compiles CSS rules from various stylesheets and applies them to individual elements. Developers often need to inspect this inheritance hierarchy to understand styling issues or manipulate elements programmatically.

However, reproducing this feature in pure JavaScript without browser plugins can be challenging. To address this, we provide a cross-browser compatible solution:

function css(el) {
    var sheets = document.styleSheets, ret = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector 
        || el.msMatchesSelector || el.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (el.matches(rules[r].selectorText)) {
                ret.push(rules[r].cssText);
            }
        }
    }
    return ret;
}

This function takes an element as input and returns an array containing all CSS rules that apply to it. For instance, calling css(document.getElementById('elementId')) will provide an array with each element representing a CSS rule applied to the specified element.

By leveraging this solution, developers can gain insights into the source of CSS rules and manage element styling more effectively, without relying on browser plugins.

The above is the detailed content of How to Find the Origin of CSS Rules Applied to an Element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!