Heim >Web-Frontend >CSS-Tutorial >Wie kann ich nur mithilfe von JavaScript feststellen, welche CSS-Regeln sich auf ein bestimmtes Element auswirken?

Wie kann ich nur mithilfe von JavaScript feststellen, welche CSS-Regeln sich auf ein bestimmtes Element auswirken?

Linda Hamilton
Linda HamiltonOriginal
2024-12-16 22:57:19312Durchsuche

How Can I Determine Which CSS Rules Affect a Specific Element Using Only JavaScript?

Bestimmen von CSS-Regeln, die sich auf Elemente in JavaScript auswirken

Problem:

Viele Webentwicklungstools bieten Funktionen zur Auswahl von Elementen basierend auf Klasse oder ID. Es ist jedoch möglich, tiefer in den Rendering-Prozess von Browsern einzutauchen, indem man die von ihnen geladenen rohen CSS-Stylesheets untersucht. CSS-Regeln werden kompiliert und auf Elemente aus mehreren Stylesheets angewendet, wodurch ein komplexer Vererbungsbaum entsteht.

Frage:

Wie können wir diese Funktion in reinem JavaScript replizieren, ohne darauf angewiesen zu sein? zusätzlicher Browser Plugins?

Beispiel:

Für ein bestimmtes Element wie:

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

<p>

Das p#description-Element ist von zwei CSS-Regeln betroffen: einer roten Farbe und einer Schriftgröße von 20px.

Antwort:

Funktion:

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:

calling css(document.getElementById('elementId')) 

Diese Funktion gibt ein Array zurück, das jede CSS-Regel enthält, die mit der übergebenen übereinstimmt Element.

Das obige ist der detaillierte Inhalt vonWie kann ich nur mithilfe von JavaScript feststellen, welche CSS-Regeln sich auf ein bestimmtes Element auswirken?. 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