ホーム >>> HTML整理ノート

borderの応用：ボタンを作る

borderスタイルを応用してボタンを作成。
★Scriptプロパティ
　borderTop、borderRight、borderBottom、borderLeft

Sample

クリックすればボタンらしく変身します。

Pでボタン

spanタグで作る･･･spanでボタン　

buttonタグで作り、よりボタンらしくする

tableでボタン

(border属性を全てクリアする)　

Sample Source......................................................................>>>

<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でボタン";
}
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でボタン";
}
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 = "SPANでボタン";
}
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 = "SPANでボタン";
}
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 = "BUTTON";
}
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 = "BUTTON";
}
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でボタン";
        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でボタン";
        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:100px;background-color:silver;font:bold 12pt;
　　　　　　text-align:center;cursor:hand;" onclick="PpOn();">Pでボタン</p>
<p>spanタグで作る･･･<span id="sp" style="width:130;background-color:silver;font:bold 12pt;
　　　　　text-align:center;cursor:hand;" onclick="SpanOn();">spanでボタン</span>　</p>
<p>buttonタグで作り、よりボタンらしくする
　　<button id="bt" style="width:100;background-color:silver;font:bold 12pt;
　　text-align:center;cursor:hand;" onclick="ButtonOn();">BUTTON</button></p>

<table id="tb" cellpadding="0" style="border:thin solid black">
  <tr>
    <td id="td1" style="width:120;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>