Wie kann ich mit reinem JavaScript alle anwendbaren CSS-Regeln für ein Element abrufen?

Auf ein Element anwendbare CSS-Regeln mit JavaScript finden

In der Webentwicklung ist der Zugriff auf CSS-Elemente bestimmter Klassen oder IDs eine häufige Aufgabe. oft unterstützt durch Tools und APIs. Allerdings stellen Browser alle anwendbaren CSS-Regeln aus verschiedenen Quellen zusammen, um das Erscheinungsbild eines Elements zu bestimmen. Wie können wir diese Funktionalität in reinem JavaScript replizieren, ohne auf Browser-Plugins angewiesen zu sein?

Ermitteln berechneter CSS-Regeln

Betrachten Sie das folgende HTML- und CSS-Beispiel:

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

<p>

In diesem Fall erbt das Element p#description zwei CSS-Regeln: eine rote Farbe und eine Schriftgröße von 20 Pixel. Ziel ist es, den Ursprung dieser Regeln zu bestimmen.

JavaScript-Implementierung

Um dies zu erreichen, können wir die folgende JavaScript-Funktion verwenden:

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

var rules = css(document.getElementById('elementId'));

Die Regelvariable enthält jetzt ein Array aller CSS-Regeln anwendbar auf das ausgewählte Element.

Hinweis:

Diese Funktion basiert auf der Methode Element.matches(), die für ältere Browser eine browserübergreifende Kompatibilitätspolyfüllung erfordert. Es bietet jedoch eine schnelle und effiziente Methode zur Identifizierung von CSS-Regeln ohne zusätzliche Browser-Plugins.

Das obige ist der detaillierte Inhalt vonWie kann ich mit reinem JavaScript alle anwendbaren CSS-Regeln für ein Element abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!