Wie kann man den CSS-Vererbungsbaum in JavaScript verfolgen?

CSS-Vererbungsbaum in JavaScript verfolgen

Die Identifizierung der auf ein bestimmtes Element angewendeten CSS-Regeln ist entscheidend für das Verständnis der visuellen Erscheinung und des Verhaltens eines Elements Webseite. Viele Tools bieten praktische Methoden zum Auswählen von Elementen basierend auf Klasse oder ID, aber die Rückverfolgung der Ursprünge berechneter CSS-Regeln stellt in reinem JavaScript eine Herausforderung dar.

Um dieses Problem zu beheben, kann eine browserübergreifende kompatible Lösung implementiert werden:

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 Argument und gibt ein Array von CSS-Regeln zurück, die für es gelten. Um seine Verwendung zu demonstrieren:

var element = document.getElementById('elementId');
var rules = css(element);
console.log(rules); // Array of CSS rules applied to the element

Diese Lösung bietet eine einfache und browserübergreifende kompatible Methode zum Bestimmen der auf ein Element angewendeten CSS-Regeln, sodass Entwickler den Vererbungsbaum verfolgen und tiefere Einblicke in den Stil von gewinnen können ihre Webseiten.

Das obige ist der detaillierte Inhalt vonWie kann man den CSS-Vererbungsbaum in JavaScript verfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!