便利eelife Java Script

   戻る

文字飾り、フォント、サイズ、カラー、の変更
:下線 :太字 :斜体 文字装飾の変更
FontSize:PX
FontColor:
Fontface:



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY>
<P>文字装飾</P>
<FORM name="myFORM">
<TABLE cellpadding="5" class="smp" width="500" height="100">
<TBODY>
<TR>
<TD height="11" width="273">
<INPUT type="checkbox" name="Under" onclick="mojikazari()">:下線 
<INPUT type="checkbox" name="Bold" onclick="mojikazari()" >:太字 
<INPUT type="checkbox" name="Italic" onclick="mojikazari()" >:斜体</TD>
<TD rowspan="4" width="195" id="tbl1" style="font-size : 25px;">文字装飾の変更</TD>
</TR>
<TR>
<TD width="273">FontSize:<SELECT name="fsize" onchange="chgsize()">
<OPTION value="70">70</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="25"selected>25</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="19">19</OPTION>
<OPTION value="18">18</OPTION>
<OPTION value="17">17</OPTION>
<OPTION value="16">16</OPTION>
<OPTION value="15">15</OPTION>
<OPTION value="14">14</OPTION>
<OPTION value="13">13</OPTION>
<OPTION value="12">12</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="10">10</OPTION>
</SELECT>PX</TD>
</TR>
<TR>
<TD>FontColor:<SELECT name="ClrList" onchange="chgclr()">
<OPTION value="red"selected>Red</OPTION>
<OPTION value="blue">Blue</OPTION>
<OPTION value="green">Green</OPTION>

</SELECT></TD>
</TR>
<TR>
<TD width="273">Fontface:<SELECT name="fontface" onchange="chgface()">
<OPTION value="MS ゴシック" selected>MS ゴシック</OPTION>
<OPTION value="MS Pゴシック">MS Pゴシック</OPTION>
<OPTION value="MS 明朝">MS 明朝</OPTION>
<OPTION value="MS UI Gothic">MS UI Gothic</OPTION>
<OPTION value="HGゴシックE">HGゴシックE</OPTION>
<OPTION value="HG丸ゴシックM-PRO">HG丸ゴシックM-PRO</OPTION>
<OPTION value="HGP創英角ゴシックUB">HGP創英角ゴシックUB</OPTION>
<OPTION value="HG創英角ポップ体">HG創英角ポップ体</OPTION>
<OPTION value="HG正楷書体-PRO">HG正楷書体-PRO</OPTION>
<OPTION value="monospace">monospace</OPTION>
</SELECT></TD>
</TR>
</TBODY>
</TABLE>
</FORM>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。-->
<SCRIPT language="JavaScript">
<!--
        // 文字飾りの変更
function mojikazari(){    // チェックボックス
if (document.myFORM.Bold.checked){futoji = 'bold';}
else{futoji = 'normal'};   //太字チェック
if (document.myFORM.Under.checked){sitasen = 'underline';}
else{sitasen = ''};   //下線チェック
if (document.myFORM.Italic.checked){syatai = 'italic';}
else{syatai = ''}; //斜体チェック

tbl1.style.fontWeight = futoji;
tbl1.style.textDecoration = sitasen;
tbl1.style.fontStyle = syatai;
}

        // 色の変更
function chgclr(){
clr = document.myFORM.ClrList.selectedIndex;   // セレクトメニュー
clr = document.myFORM.ClrList.options[clr].text;
tbl1.style.color= clr;
}

        // サイズの変更
function chgsize(){
size = document.myFORM.fsize.selectedIndex; //
size = document.myFORM.fsize.options[size].value;
tbl1.style.fontSize= size;
}

        // 書体の変更
function chgface(){
face = document.myFORM.fontface.selectedIndex;
face = document.myFORM.fontface.options[face].value;
tbl1.style.fontFamily= face;
}


// -->
</SCRIPT>
コメント
fontWeight 文字の太さ :  ふつう,normal 太い,bold
textDecoration 文字飾り : なし,none  下線,underline  上線overline  取り消し線,line-through
fontStyle 文字のスタイル : ふつう,normal  斜体,italic
color 文字の色 :
fontSize : 文字サイズ
.fontFamily : フォント名

チェックボックス
セレクトメニュー