Comment récupérer par programme les règles CSS applicables aux éléments en JavaScript ?

Récupération des règles CSS applicables aux éléments

Introduction :
Les navigateurs Web appliquent les styles CSS de diverses feuilles de style à éléments pour les restituer. Des outils comme Firebug exposent ces informations, affichant l'arborescence d'héritage CSS pour chaque élément. Cet article explique comment répliquer cette fonctionnalité en JavaScript pur sans plugins de navigateur.

Solution :
Pour déterminer les règles CSS appliquées à un élément :

1. Obtenez les feuilles de style du document : Accédez au tableau de feuilles de style associées au document.
2. Parcourez les règles CSS : Parcourez chaque feuille de style et ses règles .
3. Vérifier l'applicabilité : Utilisez la méthode matches() pour déterminer si l'élément correspond au texte du sélecteur d'une règle CSS.
4. Capturez les règles applicables : Si une correspondance est trouvée, placez le texte CSS dans un tableau.

Voici un exemple de code JavaScript pour implémenter cette solution :

function css(el) {
    var sheets = document.styleSheets;
    var 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;
}

Pour utiliser cette fonction, appelez css(document.getElementById('elementId')). Il renverra un tableau contenant les règles CSS appliquées sous forme de chaînes.

Exemple :

Considérez cet exemple HTML et CSS :

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

<p>

Invocation css(document.getElementById('description')) donnera un tableau avec deux éléments :

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

Cette fonction fournit une approche simple et compatible avec tous les navigateurs pour récupérer les règles CSS applicables pour un élément donné. en JavaScript pur.

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!