Size, Color

文字サイズと文字の色

文字サイズ

文字色

クリックすると文字の大きさや色が変わります。

【Source Code】

<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>
<h2>文字サイズと文字の色</h2>

<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>

<div id="content" style="border-style: dashed; border-width: 1px; ">
<p>クリックすると文字の大きさや色が変わります。</p>
</div>

文字の大きさを変更する関数と、文字の色を変更する関数です。
今回も関数は <head> の中に、それ以外のソースコードは <body> の中に置いています。
"content" は div の id で指定した名前です。

<script type="text/javascript">
<!--
function changeSize(fontSize)
{ document.getElementById("content").style.fontSize=fontSize; }

function changeColor(color)
{ document.getElementById("content").style.color=color; }
// -->
</script>
</head>

onclick で関数を呼び出します。

<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>

大きさや色を設定する TEXT の領域です。
id に "content" を設定して下さい。

<div id="content" style="border-style: dashed; border-width: 1px; ">
<p>クリックすると文字の大きさや色が変わります。</p>
</div>

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)