« 【JavaScript】 要素を取得する | トップページ | 【JavaScript】 イベントハンドラをセットする »

2006年6月 6日 (火)

【JavaScript】 動的に要素を変更してみる

HTML要素の参照を取得したら、次は見た目や中身を変更してみましょう。

1.中身を変更する
div・spanなど、HTML要素には中に別の要素が入れ子になっている場合が多いですが、この入れ子になっている中身を変更することが出来ます。

-- HTML --
<div id="ex1">.....</div>

-- JavaScript --
document.getElementById("ex1").innerHTML = "変更後の文字列です";
document.getElementById("ex1").innerHTML = "<b>タグも書き込めます</b>";

何かを実行した時に注意を促すメッセージを表示する場合などに使用できます。

2.見た目を変更する
要素の表示スタイルを動的に変更することが出来ます。
以下は枠線の色を変更するサンプルです。

-- HTML --
<div id="ex2" style="width:100px;height:100px;border:solid 1px black;"></div>

-- JavaScript --
document.getElementById("ex2").style.borderColor = "red";

要素のstyleプロパティ以下には、CSSで定義されている属性と同じ名前のプロパティが用意されていて、これを変更することで表示スタイルを変更できます。
※ CSS属性で、例えばborder-colorなどハイフンで区切られているものについては、JavaScriptではborderColorといった具合にハイフンが無くなり代わりにハイフンの後の1文字目が大文字になるという風になっています。

3.画像を入れ替える
imgタグにはsrcというimgタグ特有の属性がありますが、これらのタグの属性も変更可能です。
以下は、画像を変更するサンプルです。

-- HTML --
<img id="ex3" src="example1.gif">

-- JavaScript --
document.getElementById("ex3").src = "example2.gif";

小さなサムネイル画像をクリックされたら大きな画像に変更する、といったことが出来ます。

|

« 【JavaScript】 要素を取得する | トップページ | 【JavaScript】 イベントハンドラをセットする »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10416870

この記事へのトラックバック一覧です: 【JavaScript】 動的に要素を変更してみる:

« 【JavaScript】 要素を取得する | トップページ | 【JavaScript】 イベントハンドラをセットする »