ﾎﾞﾀﾝを作る(borderの応用)

Pﾀｸﾞでﾎﾞﾀﾝ

spanﾀｸﾞで作る･･･spanﾀｸﾞ　

buttonﾀｸﾞで作り、よりﾎﾞﾀﾝらしくする

tableでﾎﾞﾀﾝ

(border属性を全てｸﾘｱする)　

htmlsouse.gif (2461 バイト)

<script language="JavaScript"><!--
var flg_pp = "off";
function PpOn(){    //Pﾀｸﾞでﾎﾞﾀﾝ
  if(flg_pp == "off"){
    pp.style.borderTop = "solid gray";
    pp.style.borderLeft = "solid gray";
    pp.style.borderRight = "1.5mm solid azure";
    pp.style.borderBottom = "solid azure";
    pp.style.color="red";
    pp.innerText = "Pﾀｸﾞでﾎﾞﾀﾝon";
  }
  if(flg_pp == "on"){
    pp.style.borderTop = "solid azure";
    pp.style.borderLeft = "solid azure";
    pp.style.borderRight = "1.5mm solid gray";
    pp.style.borderBottom = "solid gray";
    pp.style.color="white";
    pp.innerText = "Pﾀｸﾞでﾎﾞﾀﾝoff";
}
flg_pp = (flg_pp == "off") ? "on" : "off";
}

var flg_sp = "off";
function SpanOn(){    //SPANﾀｸﾞでﾎﾞﾀﾝ
if(flg_sp == "off"){
    sp.style.borderTop = "solid gray";
    sp.style.borderLeft = "solid gray";
    sp.style.borderRight = "1.5mm solid bisque";
    sp.style.borderBottom = "solid bisque";
    sp.style.color="red";
    sp.innerText = "ﾎﾞﾀﾝon";
}
if(flg_sp == "on"){
    sp.style.borderTop = "solid bisque";
    sp.style.borderLeft = "solid bisque";
    sp.style.borderRight = "1.5mm solid gray";
    sp.style.borderBottom = "solid gray";
    sp.style.color="white";
    sp.innerText = "ﾎﾞﾀﾝoff";
}
flg_sp = (flg_sp == "off") ? "on" : "off";
}

var flg_bt = "off";
function ButtonOn(){         //buttonﾀｸﾞでﾎﾞﾀﾝ
if(flg_bt == "off"){
    bt.style.borderTop = "solid gray";
    bt.style.borderLeft = "solid gray";
    bt.style.borderRight = "1.5mm solid azure";
    bt.style.borderBottom = "solid azure";
    bt.style.color="red";
    bt.innerText = "ﾎﾞﾀﾝon";
}
if(flg_bt == "on"){
    bt.style.borderTop = "solid azure";
    bt.style.borderLeft = "solid azure";
    bt.style.borderRight = "1.5mm solid gray";
    bt.style.borderBottom = "solid gray";
    bt.style.color="white";
    bt.innerText = "ﾎﾞﾀﾝoff";
}
flg_bt = (flg_bt == "off") ? "on" : "off";
}

var flg_td1 = "off";
function TableOn(){    //tableﾀｸﾞでﾎﾞﾀﾝ
if(flg_td1 == "off"){
    td1.style.borderTop = "solid gray";
    td1.style.borderLeft = "solid gray";
    td1.style.borderRight = "1.5mm solid bisque";
    td1.style.borderBottom = "solid bisque";
    td1.style.color="red";
    td1.innerText = "tableでﾎﾞﾀﾝon";
    tb.style.borderColor = "magenta";
}
if(flg_td1 == "on"){
    td1.style.borderTop = "solid bisque";
    td1.style.borderLeft = "solid bisque";
    td1.style.borderRight = "1.5mm solid gray";
    td1.style.borderBottom = "solid gray";
    td1.style.color="white";
    td1.innerText = "tableでﾎﾞﾀﾝoff";
    tb.style.borderColor = "gray";
}
flg_td1 = (flg_td1 == "off") ? "on" : "off";
}

function BorderClear(){    //全てのborder属性をｸﾘｱ
    pp.style.border = "";
    pp.style.color="";
    sp.style.border = "";
    sp.style.color="";
    bt.style.border = "";
    bt.style.color="";
    td1.style.border = "";
    td1.style.color="";
    tb.style.borderColor = "";
}
//--></script>
</head>

<body>
<p id="pp"
    style="width:180;background-color:silver;
    font:bold 14pt;text-align:center;cursor:hand;"
    onclick="PpOn();">Pﾀｸﾞでﾎﾞﾀﾝ</p>

<p>spanﾀｸﾞで作る･･･
<span id="sp"
    style="width:120;background-color:silver;
    font:bold 14pt;text-align:center;cursor:hand;"
    onclick="SpanOn();">spanﾀｸﾞ</span>

<p>buttonﾀｸﾞで作り、よりﾎﾞﾀﾝらしくする
<button id="bt"
    style="width:120;background-color:silver;
    font:bold 14pt;text-align:center;cursor:hand;"
    onclick="ButtonOn();">buttonﾀｸﾞ</button>

<table id="tb" cellpadding="0"
    style="border:thin solid black">
<tr>
<td id="td1"
    style="width:160;background-color:silver;
        font:bold 12pt;text-align:center;cursor:hand;"
    onclick="TableOn();">tableでﾎﾞﾀﾝ</td>
</tr>
</table>

<p><span style="color:blue;cursor:hand;"
    onclick="BorderClear();">
    (border属性を全てｸﾘｱする)</span></p>

END(99/7/29)