JavaScript 太字,下線,斜体 文字飾りを替えます

検索サイト 便利eelife JavaScriptサンプル集Top
   検索サイト 便利eelife トップ : JavaScriptサンプル集トップ >> チェックボックス

文字飾りを替えます。

:下線  :太字  :斜体

チェックを入れてください!


サンプルソースから書き方まで、JavaScriptに関する情報はこちら  All About [JavaScript]


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM name="myFORM">
<P><INPUT type="checkbox" name="Under" onclick="mojikazari()">:下線 
<INPUT type="checkbox" name="Bold" onclick="mojikazari()">:太字 
<INPUT type="checkbox" name="Italic" onclick="mojikazari()">:斜体</P>
<P id="idName" style="font-size : 20px;">チェックを入れてください!</P>
</FORM>
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
//-----文字飾りの変更
function mojikazari(){
Obj=document.myFORM;

if (Obj.Under.checked){sitasen = 'underline';}    //下線チェック
else{sitasen = 'none'};   

if (Obj.Bold.checked){futoji = 'bold';}   //太字チェック
else{futoji = 'normal'};

if (Obj.Italic.checked){syatai = 'italic';}     //斜体チェック
else{syatai = 'normal'};

idName.style.textDecoration = sitasen;
idName.style.fontStyle = syatai;
idName.style.fontWeight = futoji;

}

// -->
</SCRIPT>
コメント
チェックボックスの設置とスタイルの変更。

idName.style.textDecoration : 文字飾りです。
underline(下腺)  overline(上線)  line-through(取り消し線) none(なし)

idName.style.fontStyle : 文字のスタイルです。
italic(斜体)  normal(ふつう)

idName.style.fontWeight : 文字の太さです。
lighter(より細い) normal(ふつう) bold(太い)

サンプルソースから書き方まで、JavaScriptに関する情報はこちら  All About [JavaScript]

サイトマップ Copyright (C) eelife  All rights reserved リンクはご自由に