« プログラミング初心者にはJavaScriptがお薦め? | トップページ | JavaScriptの設計者はLISP信者に違いない »

2013年6月20日 (木)

ココログの背景色を変えるJavaScript動作検証

 この記事は自作のJavaScriptの動作検証用です。もちっとマシなモノが出来たら消すかもしれません。
もし巧く動けなら、下の表をテキトーにクリックすると、この頁の背景色が変わります…たぶん。
Windows7 上の Firefox21.0 でハードディスク上の HTML ファイルを開いて動作検証した時は巧く動いたんだけど、オンラインで動作するといいなあ。

               
               
               

 しかし、我ながら、プログラミングもデザインもユーザ・インターフェースも、悲しいくらいにセンス悪いなあ。

下は、HTML と JavaScript のソース。<td>タグを編集すると、動作が変わります。

  • background-color は、背景色を指定します。
  • data-id="left" は左袖を、data-id="content" は中央の記事本体を、data-id="right" は右袖の色を変えます。
<script type="text/javascript">
//<![CDATA[
function ckwbBGColor( c ) {
    var a = c.getAttribute( "data-id" );
    var t = document.getElementsByClassName( a );
    if( t.length == 0 ) { t = [ document.getElementById( a ) ] ; }
    for( var i=0; i<t.length ; i++ ) {
        t[i].style.backgroundColor = c.style.backgroundColor;
    }
    return false;
}
//]]>
</script>
<!-- // 中央:name==content 右:id==right 左:id==left -->
<table cellspacing="1" bgcolor="#aaaa44"><tbody>
<tr>
<td bgcolor="white" align="center">左</td>
<td style="background-color: rgb(220, 255, 255); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(255, 255, 255); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(220, 220, 255); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(255, 220, 255); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(220, 255, 220); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(255, 255, 220); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(220, 220, 220); " onclick="ckwbBGColor(this);" data-id="left"> </td>
<td style="background-color: rgb(255, 220, 220); " onclick="ckwbBGColor(this);" data-id="left"> </td>
</tr>
<tr>
<td bgcolor="white" align="center">中</td>
<td style="background-color: rgb(220, 255, 255); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(255, 255, 255); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(220, 220, 255); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(255, 220, 255); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(220, 255, 220); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(255, 255, 220); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(220, 220, 220); " onclick="ckwbBGColor(this);" data-id="content"> </td>
<td style="background-color: rgb(255, 220, 220); " onclick="ckwbBGColor(this);" data-id="content"> </td>
</tr>
<tr>
<td bgcolor="white" align="center">右</td>
<td style="background-color: rgb(220, 255, 255); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(255, 255, 255); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(220, 220, 255); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(255, 220, 255); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(220, 255, 220); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(255, 255, 220); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(220, 220, 220); " onclick="ckwbBGColor(this);" data-id="right"> </td>
<td style="background-color: rgb(255, 220, 220); " onclick="ckwbBGColor(this);" data-id="right"> </td>
</tr>
</tbody></table>

|

« プログラミング初心者にはJavaScriptがお薦め? | トップページ | JavaScriptの設計者はLISP信者に違いない »

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

コメント

コメントを書く



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




トラックバック

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

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

« プログラミング初心者にはJavaScriptがお薦め? | トップページ | JavaScriptの設計者はLISP信者に違いない »