便利eelife Java Script

   戻る

文字とテキストボックスのスタイル変更。




サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM name="myFORM">
<P>文字とテキストボックスのスタイル変更。</P>
<P><INPUT type="text" style="border : solid maroon 9px" onmouseover="this.style.borderStyle='dotted'"
onmouseout="this.style.borderStyle='solid'" size="50" value=" マウスを乗せるとボーダーのスタイルが変ります。" name="tbox0"></P>
<P><INPUT type="text" style="border:3px yellow solid" onmouseover="this.style.borderColor='fuchsia'"
onmouseout="this.style.borderColor='yellow'" size="50" value=" マウスを乗せるとボーダーの色が変ります。" name="tbox1"></P>
<P><INPUT type="text" style="border:3px lime solid" onmouseover="cng1()"
onmouseout="cng2()" size="50" value=" ボーダーの色と幅が変ります。" name="tbox2"></P>
<P><INPUT type="text" style="color : red;" onmouseover="this.style.color='teal'"
onmouseout="this.style.color='red'" size="50" value=" 文字の色が変ります。" name="tbox3"></P>
<P><INPUT type="text" style="color : white;background-color : purple;" onmouseover="this.style.backgroundColor='black'"
onmouseout="this.style.backgroundColor='purple'" size="50" value=" 背景の色が変ります。" name="tbox4"></P>
<P><INPUT type="text" style="border:1px gray solid" onmouseover="cng3()"
onmouseout="cng4()" size="50" value=" フォントとサイズを変えます。" name="tbox5"></P>
</FORM>
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--
function cng1(){
myFORM.tbox2.style.borderColor='blue'; //ボーダーの色と幅
myFORM.tbox2.style.borderWidth='20px';
}

function cng2(){
myFORM.tbox2.style.borderColor='lime' //ボーダーの色と幅を元に戻す
myFORM.tbox2.style.borderWidth='2px';
}

function cng3(){
myFORM.tbox5.style.fontSize='20px'; //フォントとサイズ
myFORM.tbox5.style.fontFamily='HGP創英角ポップ体';
}

function cng4(){
myFORM.tbox5.style.fontSize='14px' //フォントとサイズを元に戻す
myFORM.tbox5.style.fontFamily='MS ゴシック';
}

// -->
</SCRIPT>
コメント
style="border : solid maroon 9px : ボーダーのスタイルが実線、色は maroon 太さは 9px です。

onmouseover="this.style.borderStyle='dotted'" : マウスが乗った時のアクション、ボーダーのスタイルが点線になります。
onmouseout="this.style.borderStyle='solid'" : マウスが去った時のアクション、ボーダーのスタイルが実線になります。

borderStyle ボーダーのスタイル : なし,none 実線,solid 点線,dotted 破線,dashed 二重線,double くぼみ,groove うきだし,ridge
                                           インセット,inset アウトセット,outset
borderColor  ボーダーの色
borderWidth  ボーダーの幅
fontSize  文字のサイズ
fontFamily 書体