Comment récupérer toutes les règles CSS affectant un élément en JavaScript pur ?

Détermination de toutes les règles CSS affectant un élément en JavaScript pur

Dans le développement Web, l'inspection des feuilles de style brutes chargées par le navigateur ne fournit qu'une vue partielle compréhension des règles CSS appliquées aux éléments. En effet, les navigateurs compilent toutes les règles CSS et les appliquent aux éléments en fonction de l'héritage, ce qui entraîne un arbre d'héritage complexe qui n'est pas immédiatement visible dans la feuille de style.

Pour les développeurs recherchant une solution JavaScript pure pour reproduire cette fonctionnalité, récupérez des informations détaillées sur les règles CSS calculées affectant un élément posent un défi important sans recourir à des plugins de navigateur supplémentaires. Cependant, voici une solution complète :

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 le texte CSS pour chaque règle correspondante.

Pour illustrer son utilisation, considérez ce qui suit HTML et CSS :

HTML

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

<p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

Dans cet exemple, la fonction identifie deux CSS correspondants règles : une spécifiant une couleur rouge pour tous les

éléments et un autre définissant la taille de la police à 20 pixels pour l'élément avec l'ID #description.

Le tableau renvoyé permet une exploration plus approfondie des détails de chaque règle en faisant référence à la documentation de l'objet CSSRule. Cette approche fournit une méthode complète et compatible avec le navigateur pour extraire les règles CSS calculées appliquées à un élément sans avoir besoin de plugins supplémentaires, permettant aux développeurs d'inspecter et de déboguer en profondeur leur style.

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!