Wie kann ich alle CSS-Regeln abrufen, die ein Element in reinem JavaScript betreffen?

Ermitteln aller CSS-Regeln, die sich auf ein Element in reinem JavaScript auswirken

Bei der Webentwicklung liefert die Überprüfung der vom Browser geladenen Roh-Stylesheets nur einen Teil Verständnis der auf Elemente angewendeten CSS-Regeln. Dies liegt daran, dass Browser alle CSS-Regeln kompilieren und auf Elemente basierend auf Vererbung anwenden, was zu einem komplexen Vererbungsbaum führt, der im Stylesheet nicht sofort sichtbar ist.

Für Entwickler, die eine reine JavaScript-Lösung suchen, um diese Funktion zu reproduzieren, ist das Abrufen Detaillierte Informationen über die berechneten CSS-Regeln, die sich auf ein Element auswirken, stellen eine erhebliche Herausforderung dar, ohne auf zusätzliche Browser-Plugins angewiesen zu sein. Hier ist jedoch eine umfassende 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 verwendet ein Element als Eingabe und gibt ein Array zurück, das den CSS-Text für jede übereinstimmende Regel enthält.

Um ihre Verwendung zu veranschaulichen, betrachten Sie Folgendes HTML und CSS:

HTML

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

<p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

In diesem Beispiel identifiziert die Funktion zwei passende CSS Regeln: eine, die eine rote Farbe für alle

Elemente und eine weitere Einstellung der Schriftgröße auf 20 Pixel für das Element mit der ID #description.

Das zurückgegebene Array ermöglicht eine weitere Untersuchung der Details jeder Regel durch Verweis auf die CSSRule-Objektdokumentation. Dieser Ansatz bietet eine umfassende und browserkompatible Methode zum Extrahieren der berechneten CSS-Regeln, die auf ein Element angewendet werden, ohne dass zusätzliche Plugins erforderlich sind, sodass Entwickler ihren Stil gründlich prüfen und debuggen können.

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