Heim >Web-Frontend >js-Tutorial >Wie kann ich alle CSS-Regeln abrufen, die ein Element in reinem JavaScript betreffen?

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

DDD
DDDOriginal
2024-11-26 10:56:11352Durchsuche

How can I retrieve all CSS rules affecting an element in pure JavaScript?

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!

Stellungnahme:
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
Vorheriger Artikel:Erstellen einer API Teil 1Nächster Artikel:Erstellen einer API Teil 1