borderColorスタイルの応用
5個の表を入れ子に配置し、各表の枠線の色を上下左右別々に変化させているだけ。
Scriptプロパティ＜borderTopColor＞＜borderRightColor＞＜borderBottomColor＞＜borderLeftColor＞を利用
|
Sample Source......................................................................>>>
<script language="JavaScript"><!--
c1 = "black"; //色の変数、4色あり
c2 = "red";
c3 = "green";
c4 = "pink";
function Border(){
tbl1.style.borderTopColor=c1;
tbl1.style.borderRightColor=c2;
tbl1.style.borderBottomColor=c3;
tbl1.style.borderLeftColor=c4;
tbl2.style.borderTopColor=c4;
tbl2.style.borderRightColor=c1;
tbl2.style.borderBottomColor=c2;
tbl2.style.borderLeftColor=c3;
tbl3.style.borderTopColor=c3;
tbl3.style.borderRightColor=c4;
tbl3.style.borderBottomColor=c1;
tbl3.style.borderLeftColor=c2;
tbl4.style.borderTopColor=c2;
tbl4.style.borderRightColor=c3;
tbl4.style.borderBottomColor=c4;
tbl4.style.borderLeftColor=c1;
tbl5.style.borderTopColor=c1;
tbl5.style.borderRightColor=c2;
tbl5.style.borderBottomColor=c3;
tbl5.style.borderLeftColor=c4;
old_c1 = c1; //現在の色を記憶しておく
old_c2 = c2;
old_c3 = c3;
old_c4 = c4;
c1 = old_c4; //色の変数に、記憶した色を1つズラして設定する
c2 = old_c1;
c3 = old_c2;
c4 = old_c3;
setTimeout("Border()",800);
}
//--></script>
</head>
<body onload="Border()">
<div align="center">
<table id="tbl1" width="50%" border="0" cellspacing="0" cellpadding="3"
style="border:1px solid white"><tr><td>
<table id="tbl2" width="100%" border="0" cellspacing="0" cellpadding="3"
style="border:1px solid white"><tr><td>
<table id="tbl3" width="100%" border="0" cellspacing="0" cellpadding="3"
style="border:1px solid white"><tr><td>
<table id="tbl4" width="100%" border="0" cellspacing="0" cellpadding="3"
style="border:1px solid white"><tr><td>
<table id="tbl5" width="100%" border="0" cellspacing="0" cellpadding="3"
style="border:1px solid white"><tr><td>
<div align="center"><p style="font:bold 12pt 'ＭＳ 明朝'">
borderColorスタイルの応用</p></div>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div>