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

Inspection de l'arbre d'héritage CSS à l'aide de JavaScript

Considérez une page Web avec un élément p avec l'identifiant "description":

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

<p>

Lorsque le navigateur restitue cet élément, il fusionne toutes les règles CSS applicables dans un seul arbre d'héritage. Comment pouvons-nous reproduire cela en JavaScript pur, sans compter sur des plugins de navigateur ?

Solution :

Afin d'inspecter les règles CSS appliquées à un élément, nous pouvons parcourir les feuilles de style du document et correspondent aux sélecteurs de l'élément. Voici une fonction JavaScript multi-navigateurs pour y parvenir :

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

L'appel de css(document.getElementById('description')) renvoie un tableau de chaînes de règles CSS appliquées à l'élément, dans ce cas :

["p { color :red; }", "#description { font-size: 20px; }"]

Cette fonction permet aux développeurs d'accéder à la source des règles CSS calculées, facilitant ainsi le débogage et la compréhension de la page Web. style.

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!