Comment tracer l'arborescence d'héritage CSS en JavaScript ?

Traçage de l'arbre d'héritage CSS en JavaScript

Identifier les règles CSS appliquées à un élément spécifique est crucial pour comprendre l'apparence visuelle et le comportement d'un page web. De nombreux outils fournissent des méthodes pratiques pour sélectionner des éléments en fonction de la classe ou de l'ID, mais retracer les origines des règles CSS calculées pose un défi en JavaScript pur.

Pour résoudre ce problème, une solution compatible avec plusieurs navigateurs peut être implémentée :

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;
}

Cette fonction prend un élément comme argument et renvoie un tableau de règles CSS qui s'y appliquent. Pour démontrer son utilisation :

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

Cette solution fournit une méthode légère et compatible avec tous les navigateurs pour déterminer les règles CSS appliquées à un élément, permettant aux développeurs de retracer l'arborescence d'héritage et d'obtenir des informations plus approfondies sur le style de leurs pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!