Comment puis-je inspecter l'arborescence d'héritage CSS à l'aide de JavaScript pur ?

Inspection de l'arbre d'héritage CSS en JavaScript

Dans le développement Web, il est essentiel de comprendre comment les règles CSS sont appliquées aux éléments d'une page Web. Bien que les outils de navigateur fournissent des informations sur cet arbre d'héritage, pouvons-nous reproduire cette analyse en utilisant du JavaScript pur ?

La nécessité de reproduire l'héritage CSS

Les navigateurs compilent des règles CSS à partir de diverses sources et les appliquent aux éléments. Il en résulte une cascade complète qui définit l’apparence et la disposition de chaque élément. L'inspection de cet arbre d'héritage peut être cruciale pour comprendre le comportement visuel d'une page Web.

Solution en JavaScript pur

L'implémentation de cette fonctionnalité en JavaScript pur sans plugins pose un défi technique. Cependant, voici une solution compatible avec tous les navigateurs qui offre une approximation raisonnable :

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 accepte un élément en entrée et renvoie un tableau contenant les règles CSS qui s'appliquent à cet élément. Chaque élément du tableau représente une règle spécifique.

Exemple d'utilisation

Pour démontrer la fonction, considérez le HTML et le CSS suivants :

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

<p>

Dans cet exemple, le L'élément portant l'identifiant "description" a deux règles CSS appliquées : une couleur rouge et une taille de police de 20 px. L'appel de css(document.getElementById('description')) renverra un tableau avec les deux chaînes de règles CSS.

Analyse plus approfondie

Pour des informations plus détaillées sur chaque règle, vous pouvez explorer la CSSRule documentation de l'objet.

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!