Trouver toutes les règles CSS qui s'appliquent à un élément

Question

De nombreux outils/Api fournissent des moyens de sélection d'éléments spécifiques des classes ou Id. Il est également possible d'inspecter les premières feuilles de style chargé par le navigateur.

Toutefois, pour les navigateurs de rendre un élément, ils vont compiler toutes les règles CSS (éventuellement à partir de différents fichiers de feuille de style) et de l'appliquer à l'élément. C'est ce que vous voyez avec Firebug ou l'WebKit Inspecteur de la CSS arbre d'héritage pour un élément.

Comment puis-je reproduire cette fonction en JavaScript sans exiger un complément de plug-ins de navigateur?

Peut-être un exemple peut apporter certains éclaircissements pour ce que je suis à la recherche de:

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

<p id="description">Lorem ipsum</p>

Ici, la p#description de l'élément a deux règles CSS appliquées: une couleur rouge et une taille de police de 20 px.

Je voudrais trouver la source d'où ces calculée règles CSS proviennent de (la couleur vient de la p la règle et ainsi de suite).

Answer 1

Depuis que cette question ne dispose pas actuellement d'un poids léger (non-bibliothèque), de la croix-navigateur compatible réponse, je vais essayer de fournir un:

function css(a) {
    var sheets = document.styleSheets, o = [];
    a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.matches(rules[r].selectorText)) {
                o.push(rules[r].cssText);
            }
        }
    }
    return o;
}

JSFiddle: http://jsfiddle.net/HP326/6/

Appelant css(document.getElementById('elementId')) retournera un tableau avec un élément pour chaque règle CSS qui correspond à l'élément passé. Si vous voulez en savoir plus d'informations sur chaque règle, découvrez la CSSRule objet de la documentation.

Answer 2

On dirait que j'ai réussi à répondre à ma propre question après une heure de recherche.

C'est aussi simple que cela:

 window.getMatchedCSSRules(document.getElementById("description"))
 

(Fonctionne dans WebKit / Chrome, éventuellement d'autres aussi)

Answer 3

Jetez un oeil à cette bibliothèque, ce que l'on avait demandé: http://www.brothercake.com/site/resources/scripts/cssutilities/

Il fonctionne dans tous les navigateurs modernes de retour à IE6, peut vous donner la règle et de la propriété des collections comme Firebug (en fait c'est plus précis que Firebug), et permet aussi de calculer la relative ou absolue de la spécificité de toute règle. Le seul inconvénient est que, bien qu'il comprenne statique types de médias, il ne comprend pas les media-queries.