読者です 読者をやめる 読者になる 読者になる

nirasan's tech blog

趣味や仕事の覚え書きです。Linux, Perl, PHP, Ruby, Javascript, Android, Cocos2d-x, Unity などに興味があります。

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

はじめに

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

使い方

  • targetElementに対象のHTML要素が入るようにスクリプトを編集する
  • ブラウザのコンソールにスクリプトをコピペして実行する

スクリプト

/* 対象の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");