Wie rufe ich programmgesteuert anwendbare CSS-Regeln für Elemente in JavaScript ab?

Anwendbare CSS-Regeln für Elemente abrufen

Einführung:
Webbrowser wenden CSS-Stile aus verschiedenen Stylesheets an Elemente, um sie zu rendern. Tools wie Firebug stellen diese Informationen bereit und zeigen den CSS-Vererbungsbaum für jedes Element an. Dieser Artikel beleuchtet, wie diese Funktion in reinem JavaScript ohne Browser-Plugins repliziert werden kann.

Lösung:
So ermitteln Sie die auf ein Element angewendeten CSS-Regeln:

1. Rufen Sie die Stylesheets des Dokuments ab: Greifen Sie auf das Array von StyleSheets zu, die dem Dokument zugeordnet sind Dokument.
2. Iterieren Sie die CSS-Regeln: Durchlaufen Sie jedes Stylesheet und seine Regeln.
3. Überprüfen Sie die Anwendbarkeit: Verwenden Sie die Methode „matches()“. um festzustellen, ob das Element mit dem Selektortext einer CSS-Regel übereinstimmt.
4. Anwendbare Regeln erfassen: Wenn eine Übereinstimmung gefunden wird, verschieben Sie den CSS-Text in ein Array.

Hier ist ein Beispiel-JavaScript-Code zum Implementieren dieser Lösung:

function css(el) {
    var sheets = document.styleSheets;
    var 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;
}

Um diese Funktion zu verwenden, rufen Sie css(document .getElementById('elementId')). Es wird ein Array zurückgegeben, das die angewendeten CSS-Regeln als Zeichenfolgen enthält.

Beispiel:

Betrachten Sie dieses Beispiel für HTML und CSS:

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

<p>

Aufrufen css(document.getElementById('description')) ergibt ein Array mit zwei Elemente:

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

Diese Funktion bietet einen unkomplizierten und browserübergreifenden kompatiblen Ansatz zum Abrufen der anwendbaren CSS-Regeln für jedes bestimmte Element in reinem JavaScript.

Das obige ist der detaillierte Inhalt vonWie rufe ich programmgesteuert anwendbare CSS-Regeln für Elemente in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!