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

Inspizieren des CSS-Vererbungsbaums in JavaScript

Bei der Webentwicklung ist es wichtig zu verstehen, wie CSS-Regeln auf Elemente auf einer Webseite angewendet werden. Während Browser-Tools Einblicke in diesen Vererbungsbaum liefern, können wir diese Analyse mit reinem JavaScript replizieren?

Die Notwendigkeit, die CSS-Vererbung zu reproduzieren

Browser kompilieren CSS-Regeln aus verschiedenen Quellen und wenden sie auf Elemente an. Dadurch entsteht eine umfassende Kaskade, die das Erscheinungsbild und Layout jedes Elements definiert. Die Untersuchung dieses Vererbungsbaums kann für das Verständnis des visuellen Verhaltens einer Webseite von entscheidender Bedeutung sein.

Lösung in reinem JavaScript

Die Implementierung dieser Funktion in reinem JavaScript ohne Plugins stellt eine technische Herausforderung dar. Hier ist jedoch eine browserübergreifend kompatible Lösung, die eine vernünftige Annäherung bietet:

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

Diese Funktion akzeptiert ein Element als Eingabe und gibt ein Array zurück, das die CSS-Regeln enthält, die für dieses Element gelten. Jedes Element im Array stellt eine bestimmte Regel dar.

Verwendungsbeispiel

Um die Funktion zu demonstrieren, berücksichtigen Sie das folgende HTML und CSS:

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

<p></p>

In diesem Beispiel ist das Auf das Element mit der ID „description“ werden zwei CSS-Regeln angewendet: eine rote Farbe und eine Schriftgröße von 20 Pixel. Der Aufruf von css(document.getElementById('description')) gibt ein Array mit den beiden CSS-Regelzeichenfolgen zurück.

Weitere Analyse

Für detailliertere Informationen zu jeder Regel können Sie die CSSRule erkunden Objektdokumentation.

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