特定のHTML要素とその子要素に適用されているCSSを表示するスクリプト

はじめに

• ブラウザのコンソールから、特定のHTML要素とその子要素に適用されているCSSを取得する
• Safari, Google Chrome で動作確認済み

使い方

• targetElementに対象のHTML要素が入るようにスクリプトを編集する
• ブラウザのコンソールにスクリプトをコピペして実行する
  • Safariの場合、Webインスペクタのコンソールを使用する
  • Google Chromeの場合、デベロッパーツールのConsoleを使用する

スクリプト

/* 対象のHTML要素 */
var targetElement = document.getElementById("WRITE_YOUR_TARGET_ELEMENT_ID");
/* 再帰的にコールバック関数を実行する関数 */
var call_recursive = function(el, callback) {
    var childNodes = el.childNodes,
        child, i;
    if (childNodes.length) {
        for (var i = 0; i < childNodes.length; i++) {
            child = childNodes[i];
            callback(child);
            arguments.callee(child, callback);
        }
    }
}
/* 適用されているCSSを取得する */
var csses = {};
call_recursive(targetElement, function(el) {
    var rules = window.getMatchedCSSRules(el);
    if (rules) {
        for (var i = 0; i < rules.length; i++) {
            var css = rules[i].cssText;
            if (css) {
                csses[css] = 1;
            }
        }
    }
});
/* 取得したCSSを表示する */
Object.keys(csses).join("\n");