Comment puis-je récupérer toutes les règles CSS applicables pour un élément à l'aide de JavaScript pur ?

Trouver des règles CSS applicables à un élément avec JavaScript

Dans le développement Web, accéder aux éléments CSS de classes ou d'identifiants spécifiques est une tâche courante, souvent aidé par des outils et des API. Cependant, les navigateurs compilent toutes les règles CSS applicables provenant de diverses sources pour déterminer l'apparence d'un élément. Comment pouvons-nous reproduire cette fonctionnalité en JavaScript pur, sans recourir aux plugins de navigateur ?

Identification des règles CSS calculées

Considérons l'exemple HTML et CSS suivant :

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

<p>

Dans ce cas, l'élément p#description hérite de deux règles CSS : une couleur rouge et une taille de police de 20px. Le but est de déterminer l'origine de ces règles.

Implémentation JavaScript

Pour y parvenir, nous pouvons utiliser la fonction JavaScript suivante :

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

var rules = css(document.getElementById('elementId'));

La variable Rules contiendra désormais un tableau de toutes les règles CSS applicables à l'élément sélectionné.

Remarque :

Cette fonction s'appuie sur la méthode Element.matches(), qui nécessite un polyfill de compatibilité entre navigateurs pour les anciens navigateurs. Cependant, il fournit une méthode rapide et efficace pour identifier les règles CSS sans plugins de navigateur supplémentaires.

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!