2010年01月11日

innerHTMLプロパティ

スポンサード リンク

innerHTMLプロパティ
指定した要素の内容を書き換えます。

innerHTML 文字の太さ,色   innerHTML ID指定   innerHTML 画像   Javascript123  

ここを書き換えます。


無料レンタルカウンター「デジデジ」

サンプルソース

<html>
<head>
<title>innerHTMLプロパティ</title>
<style type="text/css">
<!--
  #incss{
   font-size : 2em;
   color : #9b4500;
   background-color : #fffdf0;
    }
-->
</style>
<script type="text/javascript">
<!--
  var msg;
  var msg1="毎度おおきに !!";
function chg_msg(m){
  if(m==0){ //サンプル@
    msg="<span style='font-weight : bold;color : red;'>"
   +msg1+"</span> イチゴケーキはいかがですか!!";

     }
if(m==1){  //サンプルA
    msg="<span id='incss';>プリン ぷりんのプリンですよ。。。</span>";
     }
if(m==2){  //サンプルB
     msg='<img src="画像URL" />';
     }
if(m==3){  //サンプルC
    msg='<a href="リンク先URL">Javascript123</a>';
    }

document.getElementById("comt").innerHTML = msg;
}
// -->
</script>

</head>
<body>
<p>
   <img src="画像URL" onmouseover="chg_msg('0')" />
   <img src="画像URL" onmouseover="chg_msg('1')" />
   <img src="画像URL" onmouseover="chg_msg('2')" />
   <a href="リンク先URL" onmouseover="chg_msg('3')">Javascript123</a>
</p>
       <p id="comt">ここを書き換えます。</p>
</body>
</html>

 innerHTML メソッドは指定した文字列で、特定した要素の内容を動的に書き換えます。
指定した文字列に HTML タグが含まれている場合は、HTML タグの文字列はそれを実行して
書き換える要素に表示されます。
  上記のサンプル@では
指定した文字列は"<span style='font-weight : bold;color : red;'>"
     +msg1+"</span> イチゴケーキはいかがですか!!";
 です。
HTML タグには文字の太さ : 太い ; 文字の色 : 赤 ; が指定してあります。
内容を書き換える対象の要素はdocument.getElementById メソッドで指定します。
このサンプルでは id 名が"comt"と付けられた
<p>要素が内容変更の対象になります。<p id="comt">ここを書き換えます。</p>

   サンプルA "<span id='incss';> ID名を付けました。innerHTMLが実行されると
ID名が'incss'と付けられた CSSプロパティで書き換えられます。
#incss{
   font-size : 2em; // 文字のサイズ
   color : #9b4500; // 文字の色*//
   background-color : #fffdf0; //背景の色
    }

 サンプルBは画像を入れました。'<img src="画像URL" />'
サンプルC
ではリンクを張ってみました。'<a href="#">Javascript123</a>'

onclick="alert(document.getElementById('comt').innerHTML);"で
指定したHTML要素の 内容をalertダイアログで表示します。

 innerHTML メソッドは単に装飾や文字列を変えるだけでなく画像をいれるなど
その内容をスパッと切り替えることができるのでいろいろ活用方法がありそうです。

選択したラジオボタンの値をinnerHTMLで表示
OnMouseOver / OnMouseOut イベントハンドラ
動く文字 ティッカー 電光掲示板
ティッカー 流れる文字
画像にマウスを乗せると説明文を表示します。
if (条件式) JavaScriptとCSSで指定した要素の表示/非表示
警告ダイアログ alert( )メソッド
ボタン
OnClick イベントハンドラ

posted by javaScript at 20:00 | 大阪 ☁ | Javascript 構文 関数 ステートメント | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。