プロが教える店舗&オフィスのセキュリティ対策術

 よろしくお願いします。

 ページの再読込などをせずに、一つのページ内でボタンやリンクをクリックすることによって、新たに文字を登場させたいと思います。その際、以下のテクニックは知っています。

1)document.write()によって、周りのタグなども含めてすべて記述する。
2)フォームのテキストエリアにvalueとして反映させる。
3)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。

 1)は融通がききません。2)はテキストエリアが元からないといけないので、ページの地の部分に表示する方法ではありません。3)は隠しておいた文字以外の文章に変換できません。

 <div>や<p>や<span>、あるいはテーブルの<td>要素の中身(文字)のみをダイレクトに変換できるテクニックがあればお教えください。

A 回答 (2件)

>要素の中身(文字)のみをダイレクトに変換できるテクニックがあればお教えください



innerHTMLを使えばよいと思います。

サンプル
<html>
<head>
<script language="JavaScript"><!--
function test() {
document.getElementById("div1").innerHTML="DIVの中身を変更しました。";
document.getElementById("td1").innerHTML="TDの中身を変更しました。";
}
// --></script>

</head>
<body>
<a href="javascript:void(0);" onClick="test();">変更</a>
<div id="div1"></div>
<table border="1"><tbody>
<tr><td>tableのテスト</td></tr>
<tr><td id ="td1"></td></tr>
</tbody></table>
</body>
</html>
    • good
    • 0
この回答へのお礼

 ありがとうございます。

 innerHTML、そういえば昔に学んだ覚えがあります。大変参考になりました。

お礼日時:2007/03/23 22:26

CSSにてあらかじめタグに


visibility:hidden;
または
display:none;
を指定しておきます。
書式は「<XXX style="visibility:hidden;">」

これをスクリプトで
visibility:visible;
または
display:block; (場合によってはinline)
に変更することで実現可能かと思います。
スクリプトは「表示状態を変更したいオブジェクト.style.visibility = "visible";」

おそらくこれで大丈夫かと思いますが、ながらくスクリプトなんてさわってないので違ったら申し訳ないです><

とほほのスタイルシート入門
http://www.tohoho-web.com/css/reference.htm#visi …
http://www.tohoho-web.com/css/reference.htm#disp …
    • good
    • 0
この回答へのお礼

 解答ありがとうございます。

 教えていただいたのは、
> 3)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。

 とほぼ同じテクニックですよね。これは承知していますが、やはり隠しておいた文字以外の文章に変換できないのです。

お礼日時:2007/03/23 22:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!