Wie kann ich nur mithilfe von JavaScript feststellen, welche CSS-Regeln sich auf ein bestimmtes Element auswirken?

Bestimmen von CSS-Regeln, die sich auf Elemente in JavaScript auswirken

Problem:

Viele Webentwicklungstools bieten Funktionen zur Auswahl von Elementen basierend auf Klasse oder ID. Es ist jedoch möglich, tiefer in den Rendering-Prozess von Browsern einzutauchen, indem man die von ihnen geladenen rohen CSS-Stylesheets untersucht. CSS-Regeln werden kompiliert und auf Elemente aus mehreren Stylesheets angewendet, wodurch ein komplexer Vererbungsbaum entsteht.

Frage:

Wie können wir diese Funktion in reinem JavaScript replizieren, ohne darauf angewiesen zu sein? zusätzlicher Browser Plugins?

Beispiel:

Für ein bestimmtes Element wie:

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>

<p></p>

Das p#description-Element ist von zwei CSS-Regeln betroffen: einer roten Farbe und einer Schriftgröße von 20px.

Antwort:

Funktion:

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;
}

Verwendung:

calling css(document.getElementById('elementId')) 

Diese Funktion gibt ein Array zurück, das jede CSS-Regel enthält, die mit der übergebenen übereinstimmt Element.

Das obige ist der detaillierte Inhalt vonWie kann ich nur mithilfe von JavaScript feststellen, welche CSS-Regeln sich auf ein bestimmtes Element auswirken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!