Heim > Web-Frontend > CSS-Tutorial > Wie kann ich den CSS-Vererbungsbaum mit reinem JavaScript überprüfen?

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

DDD
Freigeben: 2024-12-24 05:49:14
Original
816 Leute haben es durchsucht

How Can I Inspect the CSS Inheritance Tree Using Pure JavaScript?

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage