innerHTMLプロパティ
指定した要素の内容を書き換えます。
ここを書き換えます。
サンプルソース
<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){ //サンプル②
msg="<span id='incss';>プリン ぷりんのプリンですよ。。。</span>";
}
if(m==2){ //サンプル③
msg='<img src="画像URL" />';
}
if(m==3){ //サンプル④
msg='<a href="リンク先URL">Javascript123</a>';
}
.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>
ここを書き換えます。
</body>
</html>
innerHTML メソッドは指定した文字列で、特定した要素の内容を動的に書き換えます。
指定した文字列に HTML タグが含まれている場合は、HTML タグの文字列はそれを実行して
書き換える要素に表示されます。
上記のサンプル①では
指定した文字列は"<span style='font-weight : bold;color : red;'>" です。
+msg1+"</span> イチゴケーキはいかがですか！！";
HTML タグには文字の太さ : 太い ; 文字の色 : 赤 ; が指定してあります。
内容を書き換える対象の要素は メソッドで指定します。
このサンプルでは id 名が"comt"と付けられた
<p>要素が内容変更の対象になります。ここを書き換えます。
サンプル②は "<span id='incss';> ID名を付けました。innerHTMLが実行されると
ID名が'incss'と付けられた CSSプロパティで書き換えられます。
#incss{
font-size : 2em; // 文字のサイズ
color : #9b4500; // 文字の色*//
background-color : #fffdf0; //背景の色
}
サンプル③は画像を入れました。'<img src="画像URL" />'
サンプル④ではリンクを張ってみました。'<a href="#">Javascript123</a>'
onclick="alert(document.getElementById('comt').innerHTML);"で
指定したHTML要素の 内容をalertダイアログで表示します。
innerHTML メソッドは単に装飾や文字列を変えるだけでなく画像をいれるなど
その内容をスパッと切り替えることができるのでいろいろ活用方法がありそうです。
選択したラジオボタンの値をinnerHTMLで表示
OnMouseOver / OnMouseOut イベントハンドラ
動く文字 ティッカー 電光掲示板
ティッカー 流れる文字
画像にマウスを乗せると説明文を表示します。
if (条件式) JavaScriptとCSSで指定した要素の表示/非表示
警告ダイアログ alert( )メソッド
ボタン
OnClick イベントハンドラ
