Wie kann ich einen CSS-Vererbungsbaum mit reinem JavaScript überprüfen?

Inspizieren des CSS-Vererbungsbaums mit JavaScript

Stellen Sie sich eine Webseite mit einem p-Element mit der ID „description“ vor:

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

<p>

Wenn der Browser dieses Element rendert, führt er alle anwendbaren CSS-Regeln in einem einzigen Vererbungsbaum zusammen. Wie können wir dies in reinem JavaScript replizieren, ohne auf Browser-Plugins angewiesen zu sein?

Lösung:

Um die auf ein Element angewendeten CSS-Regeln zu überprüfen, können wir es durchlaufen den Stylesheets des Dokuments entsprechen und mit den Selektoren des Elements übereinstimmen. Hier ist eine browserübergreifende JavaScript-Funktion, um dies zu erreichen:

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

Der Aufruf von css(document.getElementById('description')) gibt ein Array von CSS-Regelzeichenfolgen zurück, die auf das Element angewendet werden, in diesem Fall:

["p { color :red; }", "#description { font-size: 20px; }"]

Diese Funktion ermöglicht Entwicklern den Zugriff auf die Quelle berechneter CSS-Regeln und hilft so beim Debuggen und Verstehen von Webseiten Styling.

Das obige ist der detaillierte Inhalt vonWie kann ich einen CSS-Vererbungsbaum mit reinem JavaScript überprüfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!