はじめに
JavaScriptを使ってWeb上で動作するゲームプログラムを作ろうとしたとき、多くの描画に関連する制限に衝突します。DHTMLを駆使しても、イメージをピクセル単位で処理したり、クライアントアプリケーションのように豊富なコントロールを自由に配置したりすることはできません。しかし、スクリプトからHTMLオブジェクトのスタイル属性を変更することで、HTML文書上の文字やイメージを、かなり高い自由度で動かすことができるようになります。
例えば、一般的なゲームを開発する場合、イメージの重ね合わせや、イメージの上に文字を表示させるというテクニックは当然のように必要となります。スクリプトからHTMLドキュメントにアクセスするだけでは、文字やイメージの配置を細かく指定することはできませんが（ブラウザのレイアウトに依存）、スタイルシート（CSS）を駆使すると、HTMLオブジェクトをドキュメント上に絶対座標で配置することができるようになります。
styleオブジェクト
HTMLオブジェクトの多くは、オブジェクト自身のスタイル属性を保存するstyleオブジェクトを保有しています。styleオブジェクトを使えば、CSSによるスタイル属性をスクリプトから読み出したり、新しく設定することができます。
styleオブジェクトはスタイル属性を表すプロパティを数多く保有していますが、スタイルシートの知識があれば難しいものではありません。styleオブジェクトのプロパティは、単純にスタイルシートのスタイル属性名に一致しています。例えば、背景を設定するスタイル属性backgroundに対応するプロパティはbackgroundプロパティとなります。また、名前の途中がハイフン「-」で区切られている属性名の場合は、ハイフンを取り除いて、次の単語の最初の文字を大文字にします。例えばbackground-color属性に対応するプロパティはbackgroundColorプロパティです。
object.style.background [ = sBackground ] object.style.backgroundColor [ = sColor ]
styleオブジェクトのプロパティは、全て文字列でスタイル属性を設定することができます。スタイル属性の値は、単純な数値のほかに、JavaScriptのネイティブな値では表現できない独特の列挙子が使われていますが、これらは文字列として代入したり、比較したりすることができます。例えばCSSでは、色を「#」から始まる数値で設定するほかに、redやblackなどの文字で設定することもできます。また、背景にイメージを使う場合はurl(ファイルURL)と記述します。
では、手始めにドキュメントの背景を変更するプログラムを書いてみましょう。backgroundプロパティは、背景のさまざまな設定を同時に行うことができます。backgroundColor、backgroundImage、backgroundRepeat、backgroundAttachment、backgroundPositionの各プロパティで設定する値を半角で区切ることで同時に設定できます。省略されたプロパティには初期値が採用されます。
backgroundColorプロパティは、「#」から始まる6桁の16進数によるRGB値か、色の名前（文字列）を指定します。
背景にイメージファイルを表示させたい場合はbackgroundImageプロパティにurl(ファイルのURL)を設定します。
object.style.backgroundImage[ = URL]
このプロパティの値は、CSSのスタイル属性background-Imageに対応するものです。スタイルはHTMLのstyle属性で設定することもできますが、スクリプトから制御することで、クライアント上で実行時に変更できるようになります。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>サンプル 01</title> <script language="javascript"> function colorButton_click() { document.body.style.backgroundImage = ""; document.body.style.backgroundColor = "pink"; } function imageButton_click() { document.body.style.backgroundColor = ""; document.body.style.backgroundImage = "url(back.jpg)"; } </script> </head> <body> <h1>サンプルプログラム 1</h1> <input type="button" value="背景をピンクに" onClick="colorButton_click()"> <input type="button" value="背景をイメージに" onClick="imageButton_click()"> </body> </html>
このプログラムを実行すると2つのボタンが表示されます。［背景をピンクに］ボタンを押すとcolorButton_click()関数が実行され、背景イメージを初期化して、背景色をpinkに設定します。その結果、ドキュメントの背景はピンク一色になるでしょう。［背景をイメージに］ボタンを押すと、背景イメージとして「back.jpg」を設定します。
