- ベストアンサー
何もないところに文字を表示させるテクニックとは?
- ページの再読込なく、一つのページ内でボタンやリンクをクリックすることで、新たに文字を登場させるテクニックを知りたいです。
- 既存のテクニックとして、document.write()やフォームのテキストエリアを使用する方法がありますが、柔軟性に欠けたり、ページの地の部分に表示できないといった制約があります。
- そこで、<div>や<p>や<span>、あるいはテーブルの<td>要素の中身のみをダイレクトに変換できるテクニックを教えてください。
- みんなの回答 (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>
その他の回答 (1)
- ishkkr
- ベストアンサー率46% (35/75)
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#visibility http://www.tohoho-web.com/css/reference.htm#display
お礼
解答ありがとうございます。 教えていただいたのは、 > 3)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。 とほぼ同じテクニックですよね。これは承知していますが、やはり隠しておいた文字以外の文章に変換できないのです。
お礼
ありがとうございます。 innerHTML、そういえば昔に学んだ覚えがあります。大変参考になりました。