よろしくお願いします。
ページの再読込などをせずに、一つのページ内でボタンやリンクをクリックすることによって、新たに文字を登場させたいと思います。その際、以下のテクニックは知っています。
1)document.write()によって、周りのタグなども含めてすべて記述する。
2)フォームのテキストエリアにvalueとして反映させる。
3)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。
1)は融通がききません。2)はテキストエリアが元からないといけないので、ページの地の部分に表示する方法ではありません。3)は隠しておいた文字以外の文章に変換できません。
<div>や<p>や<span>、あるいはテーブルの<td>要素の中身(文字)のみをダイレクトに変換できるテクニックがあればお教えください。
No.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>
No.1
- 回答日時:
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 …
解答ありがとうございます。
教えていただいたのは、
> 3)背景色と同じ文字色にしておいた文字の色を変えることで、あたかも文字が登場したように見せる。
とほぼ同じテクニックですよね。これは承知していますが、やはり隠しておいた文字以外の文章に変換できないのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- C言語・C++・C# プログラミングの問題です。至急教えてください。 /***から***/の部分をプログラミングにしてほし 1 2022/10/13 11:48
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- FC2ブログ テキスト版からURLも表示できるように設定できないのでしょうか。 ブログにURLを載せようとしたら文 2 2023/02/12 11:20
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- 画像編集・動画編集・音楽編集 文字等を拡大して印刷するときに生じるかもしれない問題について 3 2023/01/05 04:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
JQueryでテーブルの行を追加し...
-
テキストエリアに入力した改行...
-
動的なcheckboxのcheckedについて
-
jquery.csv2table.jsのテーブル
-
簡単なJavaスロットマシーンに...
-
selectのonChangeが動作しません
-
外部のデータファイルの読み込...
-
テーブルの行数を可変長にした...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
submitボタン押下時にPOSTされ...
-
onchangeイベントを強制的に発...
-
大文字か小文字かを判断する方法
-
【jQuery】input nameの文字列...
-
Selectボックスの幅を自動で広...
-
ラジオボタンにタブインデック...
-
Javascriptの電卓で最初の何も...
-
ハイパーリンクを別ウインドウ...
-
selectを変更不可にしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
どこに挿入?
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
Javascriptでテーブルタグの座...
-
動的なcheckboxのcheckedについて
-
javascriptで画像の移動
-
<iframe>内にHTMLをランダム表...
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
連動テーブルのクロスハイライト
おすすめ情報