多くのツール/ APIは、特定のクラスまたはIDの要素を選択する方法を提供します。ブラウザによってロードされた生のスタイルシートを検査することも可能です。

ただし、ブラウザーが要素をレンダリングするために、ブラウザーはすべてのCSSルール（おそらく異なるスタイルシートファイルから）をコンパイルし、それを要素に適用します。これは、FirebugまたはWebKit Inspector（要素の完全なCSS継承ツリー）で表示されるものです。

追加のブラウザプラグインを必要とせずに、この機能を純粋なJavaScriptで再現するにはどうすればよいですか？

おそらく、例は私が探しているもののいくつかの説明を提供することができます：

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

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

ここで、p＃description要素には2つのCSSルールが適用されています。赤い色と20ピクセルのフォントサイズです。

これらの計算されたCSSルールの出所を見つけたいと思います（色はpルールなどです）。

この質問には現在、軽量（ライブラリ以外）のクロスブラウザ互換の回答がないため、次の質問を提供しようと思います。

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;
}

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

を呼び出すcss(document.getElementById('elementId'))と、渡された要素に一致する各CSSルールの要素を含む配列が返されます。各ルールに関するより具体的な情報を知りたい場合は、CSSRuleオブジェクトのドキュメントを確認してください。

編集：この回答は非推奨になり、Chrome64以降では機能しなくなりました。歴史的背景に向けて出発。実際、バグレポートは、これを使用するための代替ソリューションについて、この質問にリンクしています。

さらに1時間の調査の後、私は自分の質問になんとか答えたようです。

これと同じくらい簡単です：

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

（WebKit / Chrome、おそらく他の人でも動作します）

求められたことを実行するこのライブラリを見てください。 ください http //www.brothercake.com/site/resources/scripts/cssutilities/

IE6に戻った最新のすべてのブラウザーで機能し、Firebugのようなルールとプロパティのコレクションを提供でき（実際にはFirebugよりも正確です）、ルールの相対的または絶対的な特異性を計算することもできます。唯一の注意点は、静的メディアタイプは理解しますが、メディアクエリは理解しないということです。

ショートバージョン^{2017年4月12日}

チャレンジャーが登場。

var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) => 
    [].concat(...[...css].map(s => [...s.cssRules||[]])) /* 1 */
    .filter(r => el.matches(r.selectorText));            /* 2 */

Line/* 1 */は、すべてのルールのフラット配列を構築します。
行/* 2 */は、一致しないルールを破棄します。

機能に基づくcss(el)同じページの@SBによるます。

例1

var div = iframedoc.querySelector("#myelement");
var rules = getMatchedCSSRules(div, iframedoc.styleSheets);
console.log(rules[0].parentStyleSheet.ownerNode, rules[0].cssText);

例2

var getMatchedCSSRules = (el, css = el.ownerDocument.styleSheets) => 
    [].concat(...[...css].map(s => [...s.cssRules||[]]))
    .filter(r => el.matches(r.selectorText));

function Go(big,show) {
    var r = getMatchedCSSRules(big);
PrintInfo:
    var f = (dd,rr,ee="\n") => dd + rr.cssText.slice(0,50) + ee;
    show.value += "--------------- Rules: ----------------\n";
    show.value += f("Rule 1:   ", r[0]);
    show.value += f("Rule 2:   ", r[1]);
    show.value += f("Inline:   ", big.style);
    show.value += f("Computed: ", getComputedStyle(big), "(…)\n");
    show.value += "-------- Style element (HTML): --------\n";
    show.value += r[0].parentStyleSheet.ownerNode.outerHTML;
}

Go(...document.querySelectorAll("#big,#show"));

.red {color: red;}
#big {font-size: 20px;}

<h3 id="big" class="red" style="margin: 0">Lorem ipsum</h3>
<textarea id="show" cols="70" rows="10"></textarea>

欠点

• メディア処理なし、いいえ@import、@media。
• クロスドメインスタイルシートからロードされたスタイルにアクセスできません。
• セレクターの「特異性」（重要度の順序）によるソートはありません。
• 親から継承されたスタイルはありません。
• 古いブラウザや初歩的なブラウザでは動作しない可能性があります。
• 疑似クラスと疑似セレクターをどのように処理するかはわかりませんが、問題ないようです。

多分私はこれらの欠点にいつか対処するでしょう。

ロングバージョン^{2018年8月12日}

これは、誰かのGitHubページ （この元のコードからBugzilla経由でフォークされたもの）から取得した、はるかに包括的な実装です。GeckoとIE向けに書かれていますが、Blinkでも動作すると噂されています。

2017年5月4日：特異度計算機に重大なバグがあり、修正しました。（GitHubアカウントを持っていないため、作成者に通知できません。）

2018年8月12日：最近のChromeアップデートでは、オブジェクトスコープ（this）が独立変数に割り当てられたメソッドから切り離されているようです。したがって、呼び出しmatcher(selector)は機能しなくなりました。に置き換えることでmatcher.call(el, selector)解決しました。

// polyfill window.getMatchedCSSRules() in FireFox 6+
if (typeof window.getMatchedCSSRules !== 'function') {
    var ELEMENT_RE = /[\w-]+/g,
            ID_RE = /#[\w-]+/g,
            CLASS_RE = /\.[\w-]+/g,
            ATTR_RE = /\[[^\]]+\]/g,
            // :not() pseudo-class does not add to specificity, but its content does as if it was outside it
            PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
            PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;
        // convert an array-like object to array
        function toArray(list) {
            return [].slice.call(list);
        }

        // handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
        function getSheetRules(stylesheet) {
            var sheet_media = stylesheet.media && stylesheet.media.mediaText;
            // if this sheet is disabled skip it
            if ( stylesheet.disabled ) return [];
            // if this sheet's media is specified and doesn't match the viewport then skip it
            if ( sheet_media && sheet_media.length && ! window.matchMedia(sheet_media).matches ) return [];
            // get the style rules of this sheet
            return toArray(stylesheet.cssRules);
        }

        function _find(string, re) {
            var matches = string.match(re);
            return matches ? matches.length : 0;
        }

        // calculates the specificity of a given `selector`
        function calculateScore(selector) {
            var score = [0,0,0],
                parts = selector.split(' '),
                part, match;
            //TODO: clean the ':not' part since the last ELEMENT_RE will pick it up
            while (part = parts.shift(), typeof part == 'string') {
                // find all pseudo-elements
                match = _find(part, PSEUDO_ELEMENTS_RE);
                score[2] += match;
                // and remove them
                match && (part = part.replace(PSEUDO_ELEMENTS_RE, ''));
                // find all pseudo-classes
                match = _find(part, PSEUDO_CLASSES_RE);
                score[1] += match;
                // and remove them
                match && (part = part.replace(PSEUDO_CLASSES_RE, ''));
                // find all attributes
                match = _find(part, ATTR_RE);
                score[1] += match;
                // and remove them
                match && (part = part.replace(ATTR_RE, ''));
                // find all IDs
                match = _find(part, ID_RE);
                score[0] += match;
                // and remove them
                match && (part = part.replace(ID_RE, ''));
                // find all classes
                match = _find(part, CLASS_RE);
                score[1] += match;
                // and remove them
                match && (part = part.replace(CLASS_RE, ''));
                // find all elements
                score[2] += _find(part, ELEMENT_RE);
            }
            return parseInt(score.join(''), 10);
        }

        // returns the heights possible specificity score an element can get from a give rule's selectorText
        function getSpecificityScore(element, selector_text) {
            var selectors = selector_text.split(','),
                selector, score, result = 0;
            while (selector = selectors.shift()) {
                if (matchesSelector(element, selector)) {
                    score = calculateScore(selector);
                    result = score > result ? score : result;
                }
            }
            return result;
        }

        function sortBySpecificity(element, rules) {
            // comparing function that sorts CSSStyleRules according to specificity of their `selectorText`
            function compareSpecificity (a, b) {
                return getSpecificityScore(element, b.selectorText) - getSpecificityScore(element, a.selectorText);
            }

            return rules.sort(compareSpecificity);
        }

        // Find correct matchesSelector impl
        function matchesSelector(el, selector) {
          var matcher = el.matchesSelector || el.mozMatchesSelector || 
              el.webkitMatchesSelector || el.oMatchesSelector || el.msMatchesSelector;
          return matcher.call(el, selector);
        }

        //TODO: not supporting 2nd argument for selecting pseudo elements
        //TODO: not supporting 3rd argument for checking author style sheets only
        window.getMatchedCSSRules = function (element /*, pseudo, author_only*/) {
            var style_sheets, sheet, sheet_media,
                rules, rule,
                result = [];
            // get stylesheets and convert to a regular Array
            style_sheets = toArray(window.document.styleSheets);

            // assuming the browser hands us stylesheets in order of appearance
            // we iterate them from the beginning to follow proper cascade order
            while (sheet = style_sheets.shift()) {
                // get the style rules of this sheet
                rules = getSheetRules(sheet);
                // loop the rules in order of appearance
                while (rule = rules.shift()) {
                    // if this is an @import rule
                    if (rule.styleSheet) {
                        // insert the imported stylesheet's rules at the beginning of this stylesheet's rules
                        rules = getSheetRules(rule.styleSheet).concat(rules);
                        // and skip this rule
                        continue;
                    }
                    // if there's no stylesheet attribute BUT there IS a media attribute it's a media rule
                    else if (rule.media) {
                        // insert the contained rules of this media rule to the beginning of this stylesheet's rules
                        rules = getSheetRules(rule).concat(rules);
                        // and skip it
                        continue
                    }

                    // check if this element matches this rule's selector
                    if (matchesSelector(element, rule.selectorText)) {
                        // push the rule to the results set
                        result.push(rule);
                    }
                }
            }
            // sort according to specificity
            return sortBySpecificity(element, result);
        };
}

修正されたバグ

• = match → += match
• return re ? re.length : 0; → return matches ? matches.length : 0;
• _matchesSelector(element, selector) → matchesSelector(element, selector)
• matcher(selector) → matcher.call(el, selector)

これはSBの回答のバージョンであり、一致するメディアクエリ内で一致するルールも返します。*.rules || *.cssRules合体と.matches実装ファインダーを削除しました。ポリフィルを追加するか、必要に応じてそれらの行を追加し直します。

このバージョンCSSStyleRuleでは、ルールテキストではなくオブジェクトも返されます。この方法でプログラムの詳細をより簡単に調べることができるので、これはもう少し便利だと思います。

コーヒー：

getMatchedCSSRules = (element) ->
  sheets = document.styleSheets
  matching = []

  loopRules = (rules) ->
    for rule in rules
      if rule instanceof CSSMediaRule
        if window.matchMedia(rule.conditionText).matches
          loopRules rule.cssRules
      else if rule instanceof CSSStyleRule
        if element.matches rule.selectorText
          matching.push rule
    return

  loopRules sheet.cssRules for sheet in sheets

  return matching

JS：

function getMatchedCSSRules(element) {
  var i, len, matching = [], sheets = document.styleSheets;

  function loopRules(rules) {
    var i, len, rule;

    for (i = 0, len = rules.length; i < len; i++) {
      rule = rules[i];
      if (rule instanceof CSSMediaRule) {
        if (window.matchMedia(rule.conditionText).matches) {
          loopRules(rule.cssRules);
        }
      } else if (rule instanceof CSSStyleRule) {
        if (element.matches(rule.selectorText)) {
          matching.push(rule);
        }
      }
    }
  };

  for (i = 0, len = sheets.length; i < len; i++) {
    loopRules(sheets[i].cssRules);
  }

  return matching;
}

getMatchedCSSRulesこれが@mediaクエリをサポートする私のバージョンの関数です。

const getMatchedCSSRules = (el) => {
  let rules = [...document.styleSheets]
  rules = rules.filter(({ href }) => !href)
  rules = rules.map((sheet) => [...(sheet.cssRules || sheet.rules || [])].map((rule) => {
    if (rule instanceof CSSStyleRule) {
      return [rule]
    } else if (rule instanceof CSSMediaRule && window.matchMedia(rule.conditionText)) {
      return [...rule.cssRules]
    }
    return []
  }))
  rules = rules.reduce((acc, rules) => acc.concat(...rules), [])
  rules = rules.filter((rule) => el.matches(rule.selectorText))
  rules = rules.map(({ style }) => style)
  return rules
}

IE9 +を保証するために、要求された要素とその子のCSSを計算し、必要に応じて以下のスニペットで新しいclassNameに保存する可能性を与える関数を作成しました。

/**
  * @function getElementStyles
  *
  * Computes all CSS for requested HTMLElement and its child nodes and applies to dummy class
  *
  * @param {HTMLElement} element
  * @param {string} className (optional)
  * @param {string} extras (optional)
  * @return {string} CSS Styles
  */
function getElementStyles(element, className, addOnCSS) {
  if (element.nodeType !== 1) {
    return;
  }
  var styles = '';
  var children = element.getElementsByTagName('*');
  className = className || '.' + element.className.replace(/^| /g, '.');
  addOnCSS = addOnCSS || '';
  styles += className + '{' + (window.getComputedStyle(element, null).cssText + addOnCSS) + '}';
  for (var j = 0; j < children.length; j++) {
    if (children[j].className) {
      var childClassName = '.' + children[j].className.replace(/^| /g, '.');
      styles += ' ' + className + '>' + childClassName +
        '{' + window.getComputedStyle(children[j], null).cssText + '}';
    }
  }
  return styles;
}

使用法

getElementStyles(document.getElementByClassName('.my-class'), '.dummy-class', 'width:100%;opaity:0.5;transform:scale(1.5);');

SBからの回答は現時点で受け入れられるべきだと思いますが、正確ではありません。見逃される可能性のあるいくつかのルールがあると何度か言及されています。それに直面して、element.matchesの代わりにdocument.querySelectorAllを使用することにしました。唯一のことは、探している要素と比較するために、ある種の固有の要素の識別が必要になるということです。ほとんどの場合、IDを一意の値に設定することで実現できると思います。これが、一致した要素が自分のものであることを識別する方法です。document.querySelectorAllの結果を探している要素に一致させる一般的な方法を考えることができれば、それは本質的にgetMatchedCSSRulesの完全なポリフィルになります。

document.querySelectorAllのパフォーマンスを確認したのは、おそらくelement.matchesよりも遅いためですが、ほとんどの場合、問題にはならないはずです。約0.001ミリ秒かかることがわかります。

これができることを宣伝しているCSSUtilitiesライブラリも見つけましたが、古く感じてしばらく更新されていません。ソースコードを見ると、見落としている場合があるのではないかと思います。