Ermitteln des Ursprungs von CSS-Regeln, die auf ein Element angewendet werden
Wenn ein Browser eine Webseite rendert, kompiliert er CSS-Regeln aus verschiedenen Stylesheets und wendet sie auf einzelne Elemente an. Entwickler müssen diese Vererbungshierarchie oft untersuchen, um Stilprobleme zu verstehen oder Elemente programmgesteuert zu manipulieren.
Die Reproduktion dieser Funktion in reinem JavaScript ohne Browser-Plugins kann jedoch eine Herausforderung sein. Um dies zu beheben, bieten wir eine browserübergreifend kompatible 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 nimmt ein Element als Eingabe und gibt ein Array zurück, das alle darauf anwendbaren CSS-Regeln enthält. Wenn Sie beispielsweise css(document.getElementById('elementId')) aufrufen, wird ein Array bereitgestellt, in dem jedes Element eine CSS-Regel darstellt, die auf das angegebene Element angewendet wird.
Durch die Nutzung dieser Lösung können Entwickler Einblicke in die Quelle gewinnen von CSS-Regeln und verwalten Sie das Element-Styling effektiver, ohne auf Browser-Plugins angewiesen zu sein.
Das obige ist der detaillierte Inhalt vonWie finde ich den Ursprung von CSS-Regeln, die auf ein Element in JavaScript angewendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
