Comment trouver l'origine des règles CSS appliquées à un élément en JavaScript ?

Trouver l'origine des règles CSS appliquées à un élément

Lorsqu'un navigateur affiche une page Web, il compile les règles CSS à partir de diverses feuilles de style et les applique à des éléments individuels. Les développeurs doivent souvent inspecter cette hiérarchie d'héritage pour comprendre les problèmes de style ou manipuler des éléments par programme.

Cependant, reproduire cette fonctionnalité en JavaScript pur sans plugins de navigateur peut s'avérer difficile. Pour résoudre ce problème, nous proposons une solution compatible avec tous les navigateurs :

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 en entrée et renvoie un tableau contenant toutes les règles CSS qui s'y appliquent. Par exemple, appeler css(document.getElementById('elementId')) fournira un tableau avec chaque élément représentant une règle CSS appliquée à l'élément spécifié.

En tirant parti de cette solution, les développeurs peuvent obtenir un aperçu de la source des règles CSS et gérer le style des éléments plus efficacement, sans compter sur les plugins du navigateur.

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!