WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:動的に文字の色と大きさを変えたい

0:[投稿] 鈴川 [MAIL] [2005/05/27 18:54 ][環境:わからない わからない]

Javascriptを最近勉強しだした、超初心者です。

挑戦している事(おみくじを作りたい)
@ボタンを押したら、乱数を発生させる
A乱数値によって凶とか吉の文言をフォームに表示

一応、表示するところまでは出来たのですが、吉だったら
文字の色を黄色で大きく、凶の時は赤で小さくといった
変化をつけたいと思っていますが、やり方がわかりません?
どなたかご教授願えるとありがたいのですが。


以下恥ずかしいけどソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.2.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200">
<TITLE></TITLE>
<SCRIPT Language = "JavaScript">  
<!--
 function IsShowEpigram(){
 var mInx;
 mUn = new Array();
 mUn[0] = "超!超!大吉";
 mUn[1] = "超!大吉";
 mUn[2] = "大吉";
 mUn[3] = "中吉";
 mUn[4] = "小吉";
 mUn[5] = "吉";
 mUn[6] = "普通";
 mUn[7] = "凶";
 mUn[8] = "小凶";
 mUn[9] = "中凶";
 mUn[10] = "大凶";

mInx = parseInt(Math.random() * 10);
 document.OUT1.Ans.value = mInx + " ; " + mUn[mInx];
}
//-->
</SCRIPT>
<STYLE type="text/css">
<!--
TD{
 font-size : large;
 color : #ff0000;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV style="top : 1342px;left : 5px;
       position : absolute;
       z-index : 2;
     " id="Layer5"><IMG src="gif/line05.jpg" width="744" height="16" border="0"></DIV>
<DIV style="width : 647px;height : 182px;top : 137px;left : 70px;
       position : absolute;
       z-index : 1;
       visibility : visible;
     " id="Layer1">
      <FORM name="OUT1">
        <TEXTAREA name="Ans" rows="12" cols="90" style="color : #FFFFFF;background-color : black;>
        </TEXTAREA></FORM>
   </DIV>
 </BODY>
  </HTML>"></TEXTAREA></FORM>
 </DIV>
 <DIV style="width : 200px;height : 30px;top : 62px;left : 261px;
 position : absolute;
 z-index : 5;
 " id="Layer2"><FONT size="5"><A href="javascript:IsShowEpigram(this.form)">■ここを押して</A></FONT></DIV>
</BODY>
</HTML>


1:[回答] を [2005/05/27 21:17 ]

スタイルシートを用いて変更をかければいいのではと思います。
document.OUT1.Ans.style.color = "変えたい色(yellow, red, #ff0000など)"
でフォントの色を、
document.OUT1.Ans.style.fontSize = "変えたいサイズ(○px, ○pt, ○em等 ○は数字)"
でフォントのサイズを変更できます。

注意ですが、上記ソースの場合、テキストエリアを行と列の数で大きさを指定していますので、フォントのサイズが変わるとテキストエリアの大きさが変更してしまいます。
それがいやな場合、テキストエリアの幅や高さの指定をスタイルシートで行ってください。

以下にそれぞれの例を載せます。

■文字の色、大きさを変更
上記ソースの
document.OUT1.Ans.value = mInx + " ; " + mUn[mInx];
部分の下に、以下のソースを追加
switch (mInx) {
case 0:
 document.OUT1.Ans.style.color="#ffff00";
 document.OUT1.Ans.style.fontSize="20px";
 break;
case 1:
 document.OUT1.Ans.style.color="#ffee00";
 document.OUT1.Ans.style.fontSize="19px";
 break;
case 2:
 document.OUT1.Ans.style.color="#ffdd00";
 document.OUT1.Ans.style.fontSize="18px";
 break;
case 3:
 document.OUT1.Ans.style.color="#ffcc00";
 document.OUT1.Ans.style.fontSize="17px";
 break;
case 4:
 document.OUT1.Ans.style.color="#ffbb00";
 document.OUT1.Ans.style.fontSize="16px";
 break;
case 5:
 document.OUT1.Ans.style.color="#ffaa00";
 document.OUT1.Ans.style.fontSize="25px";
 break;
case 6:
 //以下同様
case 7:
case 8:
case 9:
case 10:
default:
}

■テキストエリアのサイズ指定
       <TEXTAREA name="Ans" style="width: 300px; height: 200px; color : #FFFFFF;background-color : black;>
       </TEXTAREA>


2:[完了] 鈴川 [MAIL] [2005/05/30 14:46 ]

回答ありがとうございました。
指示通りにソースを組み込んだところ望んでいた結果を得ることができました。
ほかにも応用できそうでとてもうれしいです。
これからもよろしくお願い申し上げます。

追伸
山に行っていたためお礼が遅れ申し訳ありませんでした。
ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World