ココログの背景色を変える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>
//<![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>
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- サミュエル・ウーリー「操作される現実 VR・合成音声・ディープフェイクが生む虚構のプロパガンダ」白揚社 小林啓倫訳(2021.07.11)
- ココログ:記事編集で余分な改行が入る→初期設定を通常エディタにする(2019.10.10)
- Q.Ethan McCallum「バッドデータ ハンドブック データにまつわる問題への19の処方箋」オライリージャパン 磯蘭水監訳 笹井崇司訳(2019.06.07)
- ココログ:リンク切れ一覧と旧URL一覧と公開記事URL一覧を突き合わせるOpenOfficeCalc(2018.11.18)
- ココログ:古い「カテゴリ別書評一覧」から各記事の旧URL 一覧を作るVBScript(2018.11.15)
コメント