ﾍﾟｰｼﾞ全体の枠線を変更
ﾃﾞﾌｫﾙﾄ ｜枠線１ ｜枠線２ ｜枠線３
<style TYPE="text/css"><!--
.st1 {border:outset green 10mm}
.st2 {border-left:inset magenta 40pt}
.st3 {border-left:groove pink 2cm;border-right:ridge
red 3cm}
.st4 {border-top:double sandybrown 6mm;border-bottom:double
sienna 8mm}
--></style>
<script language="JavaScript"><!--
function BorderChange(n){
//class名変更を利用して、適用するｽﾀｲﾙを変更する
by.className = "st" + n;
}
function SpanOn(sp){ //ﾏｳｽが載った時
sp.style.backgroundColor = "yellow";
sp.style.color = "red";
}
function SpanOff(sp){ //ﾏｳｽが離れた時
sp.style.backgroundColor = "";
sp.style.color = "";
}
//--></script>
</head>
<body id="by" class="st1">
<div style="width:9cm;background:silver;">
<p>ﾍﾟｰｼﾞ全体の枠線を変更</p>
<div style="margin-left:1cm;margin-top:-13px;
background:pink;font-size:16">
<span onclick="BorderChange(1);"
onmouseover="SpanOn(this);"
onmouseout="SpanOff(this);">ﾃﾞﾌｫﾙﾄ</span>
｜
<span
onclick="BorderChange(2);"onmouseover="SpanOn(this);"
onmouseout="SpanOff(this);">枠線１</span>
｜
<span onclick="BorderChange(3);"
onmouseover="SpanOn(this);"
onmouseout="SpanOff(this);">枠線２</span>
｜
<span onclick="BorderChange(4);"
onmouseover="SpanOn(this);"
onmouseout="SpanOff(this);">枠線３</span>
</div></div>
END(99/6/15)