スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テキストを動的に入れ替える技についての基礎知識

 Gooブログの投稿のオンクリックやオンマウスオーバーなどのイベントで、キャプションなどのテキストを含むコンテンツを入れ替えたいときがある。今まで私が利用してきた命令は主に、インプットボックスのValue属性を入れ替えるのと、innerTextでテキストを入れ替える方法の二つだ。
 前者は、文字入力の枠だから、写真の上に配置したりしても背景が消えて読みやすいが、スクリプトがすこしややこしくなるきらいがある。ということで、最近はもっぱらinnerTextを使ってテキストを入れ替えている。

用法

<center><span style="font-size:1px;color:#ffffff;"><<div id="moji01"style="font-size:50px;color:red">書き換えられる前の文字</div></span>
<span style="font-size:1px;color:#ffffff;"><<a href="#dummy" style="font-size:14px;" onclick="moji01.innerText='入れ替えられた文字';">文字を入れ替える</a>
<<a href="#dummy" style="font-size:14px;" onclick="moji01.innerText='書き換えられる前の文字';">リセット</a></span></center>


<
書き換えられる前の文字

<文字を入れ替える
<リセット




 innerTextでは、文字の大きさを同時変えようとしてもタグがテキストと解釈されてテキスト表示され、タグの働きをしない。
 そこで用意されているのが innerHTML という属性だ。これだと、文字列に含まれたタグは変換後にタグとして機能するため、文字の大きさや画像を間に入れたりもすることができる。
 下の例では文字の色と大きさを変えて表示するようにしてみた。

用法
<center><span style="font-size:1px;color:#ffffff;"><<div id="moji02"style="font-size:50px;color:red">書き換えられる前の文字</div></span>
<span style="font-size:1px;color:#ffffff;"><<a href="#dummy" style="font-size:14px;" onclick="moji02.innerHTML='<span style=font-size:25px;color:blue;>入れ替えられた文字<span>';">文字を入れ替える</a>
<<a href="#dummy" style="font-size:25px;" onclick="moji02.innerHTML='<span style=font-size:25px;color:red;>書き換えられる前の文字</span>';">リセット</a></span></center>




<
書き換えられる前の文字

<文字を入れ替える
<リセット




      この投稿はまだ途中ですので再度見てください

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。