|
|
| DynamicHTMLの基礎 |
- DynamicHTMLは現存のタグにオブジェクト名を付けて、
そのオブジェクトにJavaScriptからアクセスする事で実現されます。
オブジェクト名は、ページ内で重複しない半角英数字で自由に設定することができますが、
JavaScriptやタグ名などまぎらわしい構えを付ける事かは出来ません。
また、IEでは大文字小文字を識別しませんがNetscapeでは区別します。
大文字小文字を変更しただけでは重複していることになります。
オブジェクト名は、タグにid=キーワードに続き指定します。
- オブジェクトへのアクセス
この例では設定された文字列にカーソルが移動すると文字色を変更します。
<p>
<div id=sample1 style="COLOR: #FF0000"
onmouseover=this.style.color="#0000FF"
onmouseout=this.style.color="#FF0000">
マウスが重なると文字色が代ります。
</div>
</p>
|
|
自分自身のオブジェクトへのアクセスは「this」キーワードで簡単に行えます。
全く同じ方法で画像を変更する事もできます。
<p>
<img
src='images/ButtonNew.gif'
onmouseover="this.src='images/ButtonReturn.gif'"
onmouseout="this.src='images/ButtonNew.gif'">
</p>
ボタンにマウスをセットしてください。
|
|
ボタンなど、他のオブジェクトからアクセスする場合はオブジェクト名を指定します。
<p>
<img id=image1 src='images/ButtonNew.gif'>
</p>
<input type=button value=ボタンの変更 onclick="image1.src='images/ButtonReturn.gif'">
|
|
ドキュメント内からアクセスする場合は、どちらにしても比較的簡単にアクセスできますが、
処理をまとめた関数からアクセスする場合は少し厄介です。
次のコードはNetscapeでは問題なく動作しますが、IEではエラーになります。
<p>
<img id=image1 src='images/ButtonNew.gif'>
</p>
<input type=button value=ボタンの変更 onclick="buttonchange();">
<script>
function buttonchange() {
document.image1.src='images/ButtonReturn.gif';
}
</script>
|
|
かわって、こちらはIEで動作してもNetscapeでは何も動作しません。
<p>
<img id=image1 src='images/ButtonNew.gif'>
</p>
<input type=button value=ボタンの変更 onclick="buttonchange();">
<script>
function buttonchange() {
image1.src='images/ButtonReturn.gif';
}
</script>
|
|
これは、IEがオブジェクトに直接アクセスできるのに対しNetscapeは、
作成したオブジェクトの上位にあたるdocumentオブジェクトを指定しなければならないことにあります。
ところが、両ブラウザとも作成したオブジェクトのエレメントIDになら直接アクセスできるのです。
エレメントIDを取得しなければならないというめんどくささは有りますが、ブラウザ毎にコードを書くよりは圧倒的に簡単です。
当サイトでご紹介する関数のほとんどはこの方法で両ブラウザに対応できるよう作成されています。
<p>
<img id=image1 src='images/ButtonNew.gif'>
</p>
<input type=button value=ボタンの変更 onclick="buttonchange();">
<script>
function buttonchange() {
var objid=document.getElementById('image1');
objid.src='images/ButtonReturn.gif';
}
</script>
|
|
- スタイルへのアクセス
スタイルへのアクセスもエレメントIDを使用します。
<p>
<div id=sample1 style="BACKGROUND:white">
背景色が変わります。
</div>
</p>
<select id=select1 size=1 onchange="changecolor(this.value)">
<option value=white>White</option>
<option value=red>Red</option>
<option value=green>Green</option>
<option value=blue>Blue</option>
</select>
<script>
function
changecolor(color) {
var objid=document.getElementById('sample1');
objid.style.background=color;
}
</script>
|
|
- クラスの使用
関数からクラスにアクセスする場合もエレメントIDを使用します。
クラスは、ページ上に見えないデータとお考えください。
<p>
<input type=button id="sample1" value='OFF' onclick="changebutton();">
</p>
ボタンを押すたびにボタンが変わります
<script>
function changebutton() {
var objid=document.getElementById('sample1');
if(objid.className=='ON') {
objid.className='OFF';
} else {
objid.className='ON';
}
objid.value=objid.className;
}
</script>
|
|
この例では、ボタンをクラスの値によって変更していますが、ボタンの場合は、クラスを使用しなくてもvalueで判断できます。
ページ上で見えない<div>や<ul>等の場合は非常に便利な機能です。
ここで注意すべきは、タグ内で設定する場合は、classに対し、スクリプトからの参照設定はclassNameです。
classNameは大文字小文字を判別しますので、classnameではアクセスできません。
<a href=javascript:void(0) id=menu1 class=OFF
onclick=menushow('menu1')>メニュー１</a><br>
<ul id="submenu1" style="DISPLAY:none">
<li>メニュー１−１</li>
<li>メニュー１−２</li>
<li>メニュー１−３</li>
<li>メニュー１−４</li>
</ul>
<p>
<a href=javascript:void(0) id=menu2 class=OFF
onclick=menushow('menu2')>メニュー２</a>
<ul id="submenu2" style="DISPLAY:none">
<li>メニュー２−１</li>
<li>メニュー２−２</li>
<li>メニュー２−３</li>
<li>メニュー２−４</li>
</ul>
<p>
ボタンを押すたびにボタンが変わります
<script>
function menushow(obj) {
var objid=document.getElementById(obj);
var subobjid=document.getElementById('sub'+obj);
if(objid.className=='OFF') {
objid.className='ON';
subobjid.style.display='block';
} else {
objid.className='OFF';
subobjid.style.display='none';
}
}
</script>
|
|
当サイトのメインメニューは、これの変形です。
|
|
|
