Wie kann ich mit reinem JavaScript alle auf ein bestimmtes Element angewendeten CSS-Regeln abrufen?

Alle mit einem Element verknüpften CSS-Regeln abrufen

Beim Browser-Rendering werden CSS-Regeln zusammengestellt und auf bestimmte Elemente angewendet. Dieser hierarchische Prozess gipfelt im endgültigen Erscheinungsbild der Elemente, wie es in Browser-Tools wie Firebug gezeigt wird. Der Zugriff auf diese berechneten CSS-Regeln ohne zusätzliche Plugins erfordert jedoch eine benutzerdefinierte Lösung in reinem JavaScript.

Lösung:

Um CSS-Regeln für ein Element abzurufen, können wir JavaScript nutzen DOM-API und CSSRule-Objekte. Der folgende Codeausschnitt bietet eine browserübergreifend kompatible Lösung:

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 nimmt ein Element als Eingabe und gibt ein Array zurück, das die dafür geltenden CSS-Regeln enthält. Um die Regeln für ein bestimmtes Element abzurufen, rufen Sie einfach css(document.getElementById('elementId')) auf.

Beispiel:

Berücksichtigen Sie das folgende HTML und CSS:

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

<p>

Der Aufruf von css(document.getElementById('description')) würde Geben Sie das folgende Array zurück:

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

Dieses Array listet die beiden CSS-Regeln auf, die für das Element gelten, und bietet so ein klares Verständnis seines endgültigen Erscheinungsbilds.

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