« David Flanagan「JavaScript 第六版」オライリージャパン 村上列訳 | トップページ | 早瀬耕「グリフォンズ・ガーデン」早川書房 »

2013年6月24日 (月)

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

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

2013.06.25追加:

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

<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にアクセスできない
//            だからオンラインだと動くんだな、これがw
//        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>
 

|

« David Flanagan「JavaScript 第六版」オライリージャパン 村上列訳 | トップページ | 早瀬耕「グリフォンズ・ガーデン」早川書房 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/201750/57659205

この記事へのトラックバック一覧です: ココログの背景色を変えるJavaScript v02:

« David Flanagan「JavaScript 第六版」オライリージャパン 村上列訳 | トップページ | 早瀬耕「グリフォンズ・ガーデン」早川書房 »