何もないところに文字を表示させるテクニックとは？
- ページの再読込なく、一つのページ内でボタンやリンクをクリックすることで、新たに文字を登場させるテクニックを知りたいです。
- 既存のテクニックとして、document.write()やフォームのテキストエリアを使用する方法がありますが、柔軟性に欠けたり、ページの地の部分に表示できないといった制約があります。
- そこで、<div>や<p>や<span>、あるいはテーブルの<td>要素の中身のみをダイレクトに変換できるテクニックを教えてください。
- ベストアンサー
何もないところに文字を表示させたい
よろしくお願いします。 ページの再読込などをせずに、一つのページ内でボタンやリンクをクリックすることによって、新たに文字を登場させたいと思います。その際、以下のテクニックは知っています。 1)document.write()によって、周りのタグなども含めてすべて記述する。 2)フォームのテキストエリアにvalueとして反映させる。 3)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。 1)は融通がききません。2)はテキストエリアが元からないといけないので、ページの地の部分に表示する方法ではありません。3)は隠しておいた文字以外の文章に変換できません。 <div>や<p>や<span>、あるいはテーブルの<td>要素の中身（文字）のみをダイレクトに変換できるテクニックがあればお教えください。
- babusan
- お礼率95% (63/66)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （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)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。 とほぼ同じテクニックですよね。これは承知していますが、やはり隠しておいた文字以外の文章に変換できないのです。
関連するQ&A
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- Ajaxで文字列を表示したいです。
お世話になります。 prototype.jsを使って、指定したdivタグ内に文字列を表示しようと思っています。 表示は出来るのですが、一瞬だけ表示されて掻き消えてしまいます。 表示されたままの状態を保持したいのですが、どうしたら良いでしょうか。 画面の詳細は以下の通りです。 まず、画面の上部にdivタグで囲ったエリア(1)にボタンがあります。 ここの部分条件を選択する画面です。 (表示・非表示のコントロールをしています) このdiv内にあるボタンを押下したとき、選択された条件を、 エリア(1)の外に存在する別のdivタグに表示したいです。 現状JavaScriptで、 ボタンが押されたときのfunction内で、 document.getElementById("AAA").innerHTML = "条件項目："; というような形で指定しています。 ちなみに、文字列を表示したいdivタグは以下のように指定しています。 <div id="AAA" style="width:980px;height:90px;border:double 2px #9999CC;margin-bottom:3px;font-size:12px;font-weight:bold;"> </div> とりあえず表示はされるのですが、一瞬だけ表示されて消えてしまいます。 消えないようにするにはどうしたら良いでしょうか。 原因が掴めず困っています。 思い当たることがありましたら、教えてください。 宜しくお願いします。
- ベストアンサー
- AJAX
- 可変長要素を中は左寄せのまま中央寄せ
widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 次のようにテーブルを使えばできたのですが、 テーブルを使わずにやることはできますか？ <style> .outer{ width:500px; margin:0 auto; background:#eee; text-align:center; } .inner{ background:yellow; margin:0 auto; text-align:left; } </style> <div class='outer'> <table class='inner'> <tr> <td>可変長の文字列・・・・・・・・・・</td> </tr> <tr> <td style='padding:20px 0;'>aaa</td> </tr> <tr> <td>bbbbbbbbbbbbbb</td> </tr> </table> </div> display:inline-blockを使っても中央寄せにはなりますが、 「行間」の設定が困難でこれではだめでした。 （１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる） <div class='outer' > <span class='inner' style='display:inline-block'> <span>可変長の文字列・・・・・・・・・・・・・・</span><br> <span>「行間」の設定はできないのでだめ</span> </span> </div> 宜しくお願いします。
- ベストアンサー
- CSS
- ネスケとＩＥを同じ表示にしたい
文字をborderで囲ったものを二列に６つずつ並べて、サイトのメニューとして 使っています。 HTMLを以下のように記し、↓ <div> <span class="menu"><a href="#">AAA</a></span> <span class="menu"><a href="#">BBB</a></span> …… </div> <div> <span class="menu"><a href="#">CCC</a></span> <span class="menu"><a href="#">DDD</a></span> …… </div> これをcssで以下のようにしているのですが、ネスケで上手く表示されません 。 .menu { font-size: 13px; text-align: center; margin: 2px; border:1px solid gray; width: 97px; height: 15px; color: #808080; } どうも、marginとwidth、heightが反映されていないようなのですが、これを ネスケでも反映させるにはどうしたらいいでしょうか。 宜しくお願いします。
- ベストアンサー
- HTML
- 『オンマウスで説明文を表示』について
http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか？ お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>
- 締切済み
- JavaScript
- IE6だけ最後の文字を数文字繰り返す＋謎の空白
CSS＋HTMLでホームページを作っているのですが、とあるページの<div>で囲った最後のテキストの部分だけがなぜか4文字から5文字繰り返します。 以前も同様の症状にあい、こちらで質問させていただいた祭には、結局コード上で空白を入れることで解決？しましたが、今度は謎の空白、おそらく下に150pxくらいのマージンできていて、どうにもこうにも回避できません・・・ 心当たりや解決方法をご存じの方はいらっしゃいますでしょうか？ ちなみに、最後のテキストというのは<p>タグなんですが、その下に画像を入れても<p>タグの最後のテキスト＋空白になります。 また、ためしに<p>タグを消して上の<h3>タグを最後にしても同じで繰り返し＋謎の空白が出てきてしまいました・・・ 同じ<div></div>内に入れても画像は特に反応しないようです（その上のテキストに症状が出る） どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- テキストエリアに入力した改行コードを保持したい
テキストエリアにコメントを入力して、その内容をDBに保存し、別ページで表示させる入力ページの作成で、フォーム内に ・テキストエリアを設置 ・その下に「プレビュー」ボタンを設置 ・その下にプレビューが表示されるエリアを設置 ・一番下にsubmitボタンを設置 test1.phpにて <form name ="form1" method="post" action="test2.php"> <table> <tr><td> <text area name ="comment" id ="comment"> </textarea> </td></tr> <tr><td> <a href="javascript:void(0);" onclick="preview_comment(); "> <img src="preview.jpg"> </a> </td></tr> <tr><td> <span id="preview_comment"> プレビュー </span> </td></tr> </table> <div><input type="submit" value ="submit"></div> </form> head部分に <script language="JavaScript"> <!-- function preview_comment() {var comment_details=document.getElementById("comment").value; document.getElementById("preview_comment").innerHTML=comment_details; } //--> </script> を設置しました。 テキストエリアにコメントを入力し、改行がある場合はその改行コードを保持した状態がプレビューとして表示され、確認をしてＯＫだったらSubmit、という処理を考えているのですが、改行コードがなくなってしまいます。 改行コードを維持したままプレビューエリアにコメントを表示させることはできますでしょうか？ どこを修正すればいいか教えて下さい。
- ベストアンサー
- JavaScript
- JSPでdivタグに定義したスタイルシートが反映されない
いつもお世話になります。 JSP／サーブレットを使用した簡単なWebアプリを作っているのですが、スタイルシートが反映されず困っています。 具体的には、下記のコードがあったとします。 <div class="main-area"> あああ<br> <!--(1)--> <table> <tr> <td>いいい</td> <!--(2)--> </tr> </table> </div> この場合、divタグにスタイルシートを適用しているので、(1)、(2)ともに反映されると思っていたのですが、 結果は、(1)は反映されるのですが、(2)は反映されませんでした。tableタグに同様にclassの定義を行えば反映されますが、なぜ上記の 状態で反映されないのでしょうか。 開発環境は以下になります。 ・Java5.0 ・eclipse3.5.2 ・tomcat6.0 ※開発はeclipse上でtomcatを起動して行っています。 よろしくお願いします。
- 締切済み
- Java
- テーブルのセルのクリック時、セル内の文字を太くするには
テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。 ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。 div要素上でクリックしたら、特定のセルの文字（この場合、id='text1'のセル）の文字を太字にしたいのです。 なお、OnClick時の処理は、外部JavaScriptで行います。 <table> <tr> <td> <div id='div1' textid='text1' onclick="ChgText(event,this)"> <table width='100%'> <tr> <td width='10%'>あああ</td> <td id='text1'>いいい</td> </tr> </table> </div> </td> <tr> </table> イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。 外部JavaScriptの概要は以下の通りです。 function ChgText(ev,item){ var text_item = null; text_item = item.tdtext_id; var chgText = document.getElementById(text_item ); chgText.style.font-weight = bold; } 上記の内容で実行しても、文字の太さは変わりませんでした。 フォントの指定の仕方がまちがっているのでしょうか？ それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか？ 根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ブログでonClickを2つ以上並べると動かない
ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。
- ベストアンサー
- ブログ
お礼
ありがとうございます。 innerHTML、そういえば昔に学んだ覚えがあります。大変参考になりました。