Heim >Web-Frontend >CSS-Tutorial >Wie kann ich nur mithilfe von JavaScript feststellen, welche CSS-Regeln sich auf ein bestimmtes Element 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!