エレメント スタイルの変更

  • [アーティクル]
Changing Element Styles Changing Element Styles *
*前のトピック: ダイナミックスタイル
*次のトピック: スタイルシートの管理

エレメント スタイルの変更

Dynamic HTMLでは、スクリプトでHTML属性を変更すると、エレメントを変更することができる。例えば、IMGエレメントやIFRAMEエレメントでのSRC属性や、DIVエレメントのSTYLE属性である。ここでは、まずIFRAMEでのSRC属性の変更、そしてIFRAMEでのバックグラウンドカラーの変更について例で示す。次に、エレメントのクラス名を変更することで、別のスタイルシートと関連付ける方法についても例で示す。

Dynamic HTMLでは、HTMLエレメント、属性、CSSスタイルのすべてに対してスクリプトからアクセスできる。 オーサーはこれらの技術を利用して、楽しいDHTML Webページを設計できる。

arrowr.gifIFRAMEのスタイル変更

arrowr.gifエレメント クラスの変更

arrowr.gifCSS属性のスクリプト記述

IFRAMEのスタイル変更

次の例では、IFRAME内のドキュメントのBODYエレメントでのstyle属性を変更し、IFRAMEのコンテントを変更する方法を示している。 

<HTML>
<HEAD><TITLE>Changing Element Attributes</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function change_image() {
document.all.myiframe.src="frame_content2.htm";
// allコレクションを使い、IFRAMEエレメントの属性にアクセスする
}
function change_background() {
document.frames.myiframe.document.body.style.backgroundColor="green";
// framesコレクションを使い、IFRAME内のドキュメントにアクセスする
}
</SCRIPT>
</HEAD>
<BODY>
<IFRAME id=myiframe src="frame_content.htm">
</IFRAME>
<BUTTON onclick=change_image()>Change contents of the IFRAME</BUTTON>
<BUTTON onclick=change_background()>Change the background color of the IFRAME</BUTTON>
</BODY>
</HTML>

エレメント クラスの変更

エレメントのインラインスタイルを変更する方法は主に2つある。1つはエレメントのSTYLE属性を変更する方法である。もう1つはエレメントのclassNameを変更する方法であり、これはグローバル スタイルシート内に定義されたクラスと一致する。次に、イベントを使ってSTYLE属性を変更する簡単な例を示す。 

<H1 id=myStyle onclick="this.style.color=blue">This text will change to blue when clicked </H1>

この例は、H1エレメントに対して、スタイル サブオブジェクトの"color"プロパティを変更している。

しかし、複数のエレメントに対してスタイルを変更するには、"コンテキストセレクタ"を基にスタイルを定義したグローバル スタイルシートを使わなくてはならない。このスタイルは、タグ名、エレメント識別子、クラス内のすべてのエレメントに適用される。全エレメントのDHTMLクラス属性により、エレメントをあらゆるクラス名に関連付けられる。このように、複数のエレメントを1つのクラスに関連付けられる。また、クラス用にグローバル スタイルを設定することで、スタイルシートをクラス名で各エレメントに適用できる。

クラス属性はスクリプトで記述できるので、ドキュメント中のエレメントと関連付けたクラスを動的に変更できる。次に例を示す。 

<HTML>
<HEAD><TITLE>Changing Element Attributes</TITLE>
<STYLE>
.textRed {color:red}
.textBlue {color:blue}
</STYLE>
</HEAD>
<BODY>
<H1 class=textBlue onmouseover="this.className='textRed'" onmouseout="this.className='textBlue'">Mouse over this text to see
the color change from blue to red and back to blue</H1>
</BODY>
</HTML>

この例では、グローバルルールが2つのクラス（"textRed"と "textBlue"）に定義されている。最初、H1はtextBlueクラスなので、青色で表示される。テキスト上にマウスが移動するとonmouseoverイベントが発生し、インライン イベントハンドラによりH1エレメントの関連付けがtextRedクラスに変更され、テキストは赤色で表示される。クラス属性はclassNameプロパティから参照される。

注　CSSスタイル用のスクリプト可能なプロパティは、positionプロパティ以外はすべて読み書き可能である。位置指定されていないエレメントを動的に位置指定することはできない。イベントハンドラ スクリプトによりエレメントを絶対位置指定する場合は、グローバル スタイルシートかインラインスタイルを使って、そのエレメントの初期位置が相対指定されていることを確認する。

CSS属性のスクリプト記述

すべてのスタイル属性は文字列型である。いくつかのプロパティには、非文字列型として値を処理できるようなスタイル オブジェクトが追加されている。例えば、オブジェクトの高さはそのheight属性が設定された方法に関係なく、ピクセル単位で計算されるので、pixelHeightプロパティは整数型である。また、posHeightプロパティも、オーサーがCSSのheight属性を最初に設定する単位のheight属性に記述しているので、整数型である。

スタイル プロパティによって単位を指定できるものもあり、値を指定するときに単位指示子をいっしょに指定する。次の例では、"pt"（ポイント）と"px"（ピクセル）指示子を使用している 

document.all.MyElement.style.fontSize = "24pt";
document.all.MyElement.style.fontSize = "120px";

単位指示子を使わない場合は、そのプロパティでのデフォルトの単位が使われる。数値や式の結果を指定すれば、自動的にデフォルトの単位に変換される。例えば、次の2つの例は、どちらもフォントサイズに72ピクセルを割り当てている。 

document.all.MyElement.style.fontSize = "72";
document.all.MyElement.style.fontSize = 72;

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