ココログの背景色を変える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>