ココログの背景色を変えるJavaScript v02

Ｏ’Ｒｅｉｌｌｙ の「JavaScript 第６版」を読んで作ったのが、右上の表。テキトーにクリックすると、地の色が変わる…はずなんだが、chrome じゃ動かなかった。Firefox と IE と Safari じゃ動いたんだが。以下にソースを示すが、jQuery を使えばもっと簡単に書けるんで、あまし参考にしないように。

2013.06.25追加：

　Google Chromeで動かない理由がわかった。chrome は、ローカルのCSSを読み込むが、アクセスは許可していない。だから描画には使えてもJavaScriptでスキャンはできない。ココログで公開した記事をchromeで読んだら、ちゃんと動きやがったｗ　以下、お世話になった頁。実は他にも幾つかコッソリ直してるが、動作に変わりはないはず←をい

• UpDownLog の ChromeでのcssRulesの扱い
• Webdeveloper.com の cssRules are null in Chrome

<script type="text/javascript">
//<![CDATA[
// OK : Firefox 21.0, Internet Explorer 9.0.17, Safari 5.1.7
// no : Chrome 27.0.1453.116 m : chromeはローカルなCSSを読めてもcssRulesにアクセスできない
//            だからオンラインだと動くんだな、これがｗ
//        http://updownlog.tumblr.com/post/10308374906/chrome-cssrules
//        http://www.webdeveloper.com/forum/showthread.php?231153-cssRules-are-null-in-Chrome

var com_cocologNifty_chikuwablog2;
if( !com_cocologNifty_chikuwablog2 ) com_cocologNifty_chikuwablog2={};

com_cocologNifty_chikuwablog2.changeBGColor = (function() {
    var colors = [                    // 背景色の一覧
        "rgb( 230, 255, 255)",
        "rgb( 255, 255, 255)",
        "rgb( 230, 230, 255)",
        "rgb( 255, 230, 255)",
        "rgb( 230, 255, 230)",
        "rgb( 255, 255, 230)",
        "rgb( 230, 230, 230)",
        "rgb( 255, 230, 230)",
    ] ;
    var tbody = '<table cellspacing="1" bgcolor="#aaaa44"><tbody>\n_tbody_</tbody></table>\n';
    var tline = '<tr><td style="background-color: _sColor_; "' +
        ' align="center" onclick="_com_(this);" data-id="_sName_">_sName_</td>\n_line_</tr>\n';
    var tcolm = '<td style="background-color: _rgb_; " onclick="_com_(this);"' +
        ' width="12px" data-id="_sName_" >&nbsp;</td>\n';

    var BG = {};    // 連想配列、スタイルのクラス名 or ID : スタイル設定
    var tb = "";    // クリックする表のHTML

    function cKeys( a ) { r=[]; for(var i in a ) r.push(i); return r; }
    function cEach( a, f ) { for( var i=0; i<a.length; i++ ) f(a[i]); return a;}
//                                    スタイルシートから背景色設定を探し連想配列BGに設定
    function makeBG() {
        cEach( document.styleSheets, function( x ) {
            try {
                cEach( x.cssRules, function( y ) {
                    try {
                        if( y.selectorText.match(/\s+/) ) return;
                        if( y.selectorText.match(/MultiBox/) ) return;
                        if( y.style.backgroundColor.toString().match( /transparent|init/i ) ) return;
                        if( y.style.backgroundColor ) { BG[y.selectorText] = y ; }
                    } catch( e ) {}
                } );
            } catch( e ) {}
        } );
//                                    クリックする表のHTMLを作る
        tb = tbody.replace( /_tbody_/m, cKeys(BG).map( function(x) {
            return tline.replace( /_sColor_/, BG[x].style.backgroundColor ).
                replace( /_sName_/mg, x ).
                replace( /_line_/m, colors.map( function(y) {
                    return tcolm.replace( /_rgb_/m, y ).replace( /_sName_/m, x );
                } ).join( "" ) );
            } ).join( "" ) ).
            replace( /_com_/mg, "com_cocologNifty_chikuwablog2.changeBGColor.chg" );
        return tb;
    }
//                                    表を書き出す
    function doWriteUI( c ) {
        if( tb == "" ) { tb = makeBG(); }
        document.writeln( tb );
//alert( tb );
        return tb;
    }
//                                    表をクリックしたら背景色を変える
    function doChange( c ) {
        BG[c.getAttribute( "data-id" )].style.backgroundColor = c.style.backgroundColor;
        return false;
    }

//doWriteUI();
    return {
        writeUI: doWriteUI,
        chg: doChange,
    };
}() );
//alert( "a");
com_cocologNifty_chikuwablog2.changeBGColor.writeUI();
//]]>
</script>