|
ダイナミックHTMLでは、ページ内にあるHTML要素が保持している文字列（コンテンツ）やタグのHTMLそのものを動的に変更できます。 例えば、ページ内のある場所の「文字列１」という文字列を、ページを表示した後でユーザーの操作などに応じて「文字列２」などと変更出来るのです。これは「動的な」ホームページを作る上で、非常に強力な手段になりますね。 変更には、JavaScriptを使うため、HTML部品のイベントに対応させて文字列やHTMLタグを変更する事も出来ます。 今回は、この文字列やHTMLを変える簡単なテストをやってみました。 文字列置換のテスト（ここにカーソルを持ってくると....）HTML要素は文字列やタグを属性として持っており、その属性をJavaScriptから変更すると表示されている文字列やHTMLを書き換えることができます。 実際の処理では、JavaScriptからHTML要素を取得するために各要素にid（識別子）を設定しておいて、JavaScriptで指定idのHTML要素を取得しその属性を書き換える、という流れになります。 文字列は、innerText（あるいはtextContent）属性、HTMLタグ全体はouterHTML属性にあります。たとえば elm.innerText = 'text2'; とすると、HTML要素elmの表示文字列をtext2に変更できるわけです。 上のタイトルは、<h3>タグにtestというＩＤを指定し、onMouseOver, onMouseOutイベントでinnerTextを変更する事で文字列を変えています。 タイトルＨＴＭＬ<h3 id=test onMouseOver="testIn()" onMouseOut="testOut()" style="background-color:#ccffff; text-align:center;">文字列置換のテスト（ここにカーソルを持ってくると....）</h3> JavaScriptのイベントハンドラ
function testIn() {
test.innerText="文字列が変わりました（カーソルアウトで元に戻ります）";
}
function testOut() {
test.innerText="文字列とタグ置換のテスト（ここにカーソルを持ってくると....）";
}
次に、Buttonをクリックすると文字列やタグを変える例を試してみます。これも、単にボタンのイベントハンドラでinnerText, outerHTMLを変更するだけです。ただし、今回はタグを変更した後でボタンをクリックするとスクリプトがエラーを起こしますね。これは「idを指定したＨＴＭＬタグ」が変更されてidを認識できなくなった結果でしょう。タグの変更は、他にも思わぬ結果をもたらす事があるので注意が必要です。 テスト文字列
ソース<p id=id1>テスト文字列</p> <p><button onClick="id1.innerText='文字列変更';">文字列変更</button> <button onClick="id1.outerHTML='<h1>タグ変更</h1>';">タグ変更</button></p> |