Comment puis-je déterminer quelles règles CSS affectent un élément spécifique en utilisant uniquement JavaScript ?

Détermination des règles CSS affectant les éléments en JavaScript

Problème :

De nombreux outils de développement Web offrent des fonctionnalités permettant de sélectionner des éléments en fonction de classe ou pièce d'identité. Cependant, il est possible d'approfondir le processus de rendu des navigateurs en inspectant les feuilles de style CSS brutes qu'ils chargent. Les règles CSS sont compilées et appliquées aux éléments de plusieurs feuilles de style, créant ainsi un arbre d'héritage complexe.

Question :

Comment pouvons-nous reproduire cette fonctionnalité en JavaScript pur sans compter sur plugins de navigateur supplémentaires ?

Exemple :

Pour un élément donné tels que :

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

<p></p>

L'élément p#description est affecté par deux règles CSS : une couleur rouge et une taille de police de 20px.

Réponse :

Fonction :

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

Utilisation :

calling css(document.getElementById('elementId')) 

Cette fonction renvoie un tableau contenant chaque règle CSS qui correspond au passé élément.

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!