ダイナミックスタイル

  • [アーティクル]
Dynamic Styles Dynamic Styles *
*前のトピック: Dynamic HTML
*次のトピック: エレメント スタイルの変更

ダイナミックスタイル

ドキュメント上のHTMLエレメントのスタイルは、動的に変更できる。テキストの色、書体、スペース、インデント、位置指定、テキストの表示に至るまで変更可能である。Dynamic HTMLオブジェクトモデルにより、あらゆるHTMLエレメントおよびその属性へのアクセスが可能となるため、スクリプトによる動的なスタイルの読み込み、変更が簡単に行える。このセクションでは、ダイナミックスタイルについて説明し、スタイルを調べたり変更する場合のオブジェクトモデルの一般的な使い方の例を示す。

スタイルを動的にする

Internet Explorer 3.0のカスケーディングスタイルシート（CSS）によって、今までにないドキュメントの表示が可能となった。CSSにより、Webオーサーやリーダーは、対応するHTMLエレメントのスタイル属性を変更することで、コンテント表示を定義したスタイルをWebページに適用できる。

Microsoft® Internet Explorer 4.0では、CSS技術のさらなるステップとして、すべてのエレメントのHTML属性をいつでも動的に変更できるようにしている。JavaScript、JScript、VBScript（Visual Basic® Scripting Edition）を使えば、すべてのHTMLエレメントの属性は、ドキュメントやユーザーイベントの応答によって変更できる。また、そのページは、サーバーからページを再ロードせずに自動的にリフローされる。つまり、エレメントのインラインCSSスタイルや他のHTML属性（IMGエレメントでのSRC属性など）を変更することで、STYLEエレメントを変更できる。

簡単なダイナミックスタイル

この新機能を使うには、新しいHTMLタグセットを覚える必要があるのか。ダイナミックスタイルには、新しいHTMLタグを使う必要はない。CSS属性が各エレメントのスタイル サブオブジェクトによって設定されるのに対して、通常のHTML属性は各エレメントのプロパティとしてアクセスできる。例えば、ユーザーが見出しにマウスを移動したときに、H1見出しのテキストの色を赤に変更するには、イベントハンドラとして若干のコードを追加するだけだ。 

<H1 onmouseover="this.style.color = 'red';">Make me red</H1>

イベントハンドラのonmouseover="this.style.color = 'red';"では、あらかじめ定義されたアクション（onmouseover）を取得し、イベント（this.style.color = 'red'）を実行するアクションを割り当てる。同じ方法でスタイルだけでなく、SRC属性ですら簡単に変更できる。 

<IMG src="before.gif" onmouseover="this.src = 'after.gif';">

この例では、マウスが画像上に移動すると、ソースが"before.gif"から"after.gif"に変更される。イベントハンドラの使用方法については、イベントモデルの理解を参照すること。

ドキュメントを動的にする

エレメントの色が動的に変更された場合は、ドキュメント中で色が変更される前と同じスペースで配置される。ブラウザがこれを表示するのは容易なことである。しかし、fontSizeやfontFamilyなどのスタイルを変更した場合は、ドキュメント中でそのエレメントを表示するのに必要となるサイズに実際に変更されることになる。Internet Explorer 4.0では、すべてのエレメントが完全に表示できるように、ドキュメントをリフローして自動的にこのような変更を処理する。サーバーからのドキュメントの再ロードすることはない。 

<html>
<body>
This is some text.
<span style="color:blue" onclick="this.style.fontSize = '30'">


This is more text.</span>
This is even more text.
</body>
</html>

この例では、"This is more text"がクリックされると、フォントサイズが大きくなり青色に変わる。ブラウザでは、変更されたテキストのサイズに合わせるように、自動的に行送りを調節し、後続するテキストを表示する。

豊富なスタイル属性

スタイル属性の値が変更されると、Internet Explorer 4.0では自動的にドキュメントをリフローするので、短いスクリプトを記述するだけでも豊富な表現効果を実現することができる。例えば、CSSのdisplay属性を使用すると、ページ上のエレメントを非表示にすることができる。つまり、最初からそのページには存在しなかったものとして扱うことができるのである。 

<html>
<body>
<div style="cursor: hand" onclick="toggle(document.all.HideShow);">
Click Here</div>
<span style="color: blue" id=HideShow>This will go away</span><br>
This is some text
<script>
function toggle(e) {
if (e.style.display == "none") {
e.style.display = "";
} else {
e.style.display = "none";
}
}
</script>
</body>
</html>

上記の例で"Click Here"という行をクリックすると、ブラウザは、"This will go away"という行は非表示とする。このSPANエレメントのdisplay属性がnoneに変更されたからである。再びクリックすると、display属性はリセットされ、"This will go away""が再表示される。

エレメントのdisplay属性をnoneに設定するだけで非表示となり、ブラウザでは確保したスペースを自動的に再利用する。この方法を利用して、展開可能な目次を表示するような、新しい情報を表示するページも作成することができる。displayプロパティの値にはnoneと""（またはnull）が使える。

また、上記の例では、CSSのcursor属性も使用している。cursor属性を設定すると、エレメント上にマウスが移動したときのカーソル形状を指定することができる。上記の例の場合、リンクテキストのような手の形のカーソルが指定されている。"Click Here"が選択されるとカーソル形状でそのことを示し、実際にクリックされると指定されたアクションが実行される。このように、cursor属性を使用すれば、そのエレメントがクリッカブルであることを示すために、アンカータグを使う必要はない。

cursor属性の有効値はcrosshair、default、hand、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、helpである。

displayプロパティでエレメントを非表示にし、ブラウザが確保したスペースを再利用している間、visibilityプロパティによりエレメントを簡単に非表示にできる。しかし、ドキュメント内のスペースは確保されたままである。

次の例は、displayプロパティの代わりにvisibilityプロパティを使用している点を除けば、上記の例とまったく同じである。 

<html>
<body>
<div style="cursor: hand" onclick="toggle(document.all.HideShow);">


Click Here</div>
<span style="color: blue" id=HideShow>This will go away</span><br>
This is some text
<script>
function toggle(e) {
if (e.style.visibility == "hidden") {
e.style.visibility = "visible";
} else {
e.style.visibility = "hidden";
}
}
</script>
</body>
</html>

上記の例では、テキスト行を非表示としているが、コンテントを下にシフトしないでスペースを再利用している。

注意事項

CSS属性の名前には、（background-colorのように）ハイフンが使われているものが多い。しかし、ハイフンは、スクリプト言語では使えない。こうした場合、HTMLドキュメントやスタイルシートでCSS属性を指定する際は、同名のプロパティを使ってアクセスする。つまり、次のように、その属性名からハイフンを取り除き、次の文字を大文字にしたものがそれである。

background-colorはbackgroundColorとする

border-leftはborderLeftとする

margin-bottomはmarginBottomとする

HTMLやスタイルシートで指定できるCSS属性名については、DHTMLリファレンスのCSS属性を、また、styleオブジェクトに対応したスクリプト可能なプロパティについては、DHTMLリファレンスのオブジェクトを参照すること。

また、すべてのCSSプロパティはいつでも設定できるが、STYLEエレメントでの設定は、インラインスタイルに反映されるだけであり、STYLEタグやLINKタグによってグローバル スタイルシートに定義されたスタイルは継承しない。次の例では、グローバルとインラインの両方でスタイルが定義されている。 

<html>
<head>
<style>
.class1 {font-family: arial}
</style>
</head>
<body>
<div id=SetByClass class=Class1>Set By Class</div>
<div style="font-family: arial">
<div id=Inherited>Inheritedd</div>
</div>
<div id=DirectlySet style="font-family: arial">Directly Set</div>
<div id=SetWithScript>Set with Script</div>
<script>
alert(SetByClass.style.fontFamily);
alert(Inherited.style.fontFamily);
alert(DirectlySet.style.fontFamily);
SetWithScript.style.fontFamily = "arial";
alert(SetWithScript.style.fontFamily);
</script>
</body>
</html>

上記の例では、このドキュメントがロードされると、4つのアラートボックスが連続して表示される。始めの2つはブランクだが、最後の2つは"arial"というメッセージが表示される。ドキュメントのテキストはすべてグローバルでArialに設定されているのだが、DIVでのテキストが、それぞれstyle.fontFamilyを参照している。インラインスタイルあるいはスクリプト実行によって、このfont-familyプロパティが設定される。

追加トピック

Internet Explorer 4.0では、エレメントのすべての属性をいつでも変更できる。ページのスタイルに影響を及ぼす属性を変更すると、スクリプトを書かなくても自動的に処理される。スクリプトから属性を変更するには、インラインスクリプトで設定するか、あるいはコレクションからエレメントにアクセスすると簡単である。コレクションによるエレメントのアクセスについては、エレメントとコレクションにおけるスクリプト記述を参照するか、DHTMLリファレンスの「コレクション」、あるいは「HTMLエレメント」において各エレメントの属性を参照すること。 また、イベントをイベントハンドラと関連付ける方法、そしてイベントバブルに関しても、知っておいたほうがよい。 ダイナミックスタイルでのトピックを以下に示す。

関連セクション

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.