ボタンを押すごとに表示内容を違和感無く変更する

JavaScript

HTML画面をボタンやクリックしたときに動的に変更する方法としては、有名どころではAjaxやJavaScriptがあります。変更内容が大きいものはAjaxを使用したほうが良いと思いますが、数行のないようならJavaScriptの方が便利です。(Ajaxも実装するときにはJavaScriptを使用するのでこの二つを並列に並べて説明することは正しくはおかしいのですが、気にしない。)

JavaScriptで画面を変更するときは、テキストボックスなどを使用しないといけないが、テキストボックスは画面からはっきり見えてしまい、デザインとしてはかっこよくない。そこで、CSSを使用してテストボックスの背景と枠をHTML画面の背景と同じにしてしまう。そうすれば、違和感無く表示することができる。

<INPUT TYPE="TEXT" NAME="名前" STYLE="border-width:0px;background-color:背景の色" readonly>
border-width:0px … テキストボックスの枠のサイズ(枠なし)
background-color:背景の色 … テキストボックスの背景色。これをHTML画面の背景色と同じにしておく。
readonly …書き込み不可。HTML画面から変更不可。

凄い当たり前のことなんだけど、知っていると大変便利だと思う。サンプルは下記

<HTML>
 <SCRIPT>
  function perlButton(){
    document.thisform.testText.value="そろそろ6.0がでるよ。";
  }
  function rubyButton(){
    document.thisform.testText.value="絶好調!";
  }
 </SCRIPT>
 <form name="thisform">
 <TABLE>
  <TR>
   <TD>メッセージ欄</TD>
  </TR>
  <TR>
  <TD><INPUT TYPE="TEXT" NAME="testText" STYLE="border-width:0px;background-color="#FFFFFF" readonly></TD>
  </TR>
 </TABLE>
 <INPUT TYPE="BUTTON" VALUE="Perl" onClick="JavaScript:perlButton()">
 <INPUT TYPE="BUTTON" VALUE="Ruby" onClick="JavaScript:rubyButton()"> 
 </form>
</HTML>