Comment puis-je récupérer toutes les règles CSS appliquées à un élément spécifique à l'aide de JavaScript pur ?

Obtenir toutes les règles CSS associées à un élément

Le rendu du navigateur implique de compiler des règles CSS et de les appliquer à des éléments spécifiques. Ce processus hiérarchique aboutit à l'apparence finale des éléments, comme le montrent les outils de navigation comme Firebug. Cependant, accéder à ces règles CSS calculées sans plugins supplémentaires nécessite une solution personnalisée en JavaScript pur.

Solution :

Pour récupérer les règles CSS d'un élément, nous pouvons exploiter les règles CSS de JavaScript. API DOM et objets CSSRule. L'extrait de code suivant fournit 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 les règles CSS qui s'y appliquent. Pour récupérer les règles d'un élément spécifique, appelez simplement css(document.getElementById('elementId')).

Exemple :

Considérez le HTML et le CSS suivants :

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

<p>

Appeler css(document.getElementById('description')) renvoie le tableau suivant :

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

Ce tableau répertorie les deux règles CSS qui s'appliquent à l'élément, permettant une compréhension claire de son apparence finale.

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!