スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

文字の色や大きさを変える





リンクテキストをクリックしたら文字の色や大きさを変えることのできるイベントハンドラを勉強します。

<html>

<head>

<script type="text/javascript">
<!--

function changeSize(fontSize) {
   document.getElementById("content").style.fontSize=fontSize;
}
function changeColor(color) {
   document.getElementById("content").style.color=color;
}


// -->
</script>

</head>

<body>

<p>

<h3>文字サイズ</h3>
<a href="javascript:void(0)" onclick="changeSize('5pt')">小</a> |
<a href="javascript:void(0)" onclick="changeSize('15pt')">中</a> |
<a href="javascript:void(0)" onclick="changeSize('30pt')">大</a>

<h3>文字色</h3>
<a href="javascript:void(0)" onclick="changeColor('black')">黒</a> |
<a href="javascript:void(0)" onclick="changeColor('red')">赤</a> |
<a href="javascript:void(0)" onclick="changeColor('green')">緑</a>

</p>

<div id="content" style="border-style: dashed; border-width: 1px; ">

<p>文字の大きさや色を動的に変化させます。</p>

</div>

</body>

</html>


フォントサイズを変更するには、style.fontSizeプロパティに値をセットします。また、文字色を変えたい場合は、style.colorプロパティに値をセットします。

style.colorプロパティは、間違って style.fontColor と書かないように。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/27-3f0c0a55
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。