その他のスタイル指定

DOM編の最後に、紹介していないスタイルの指定方法について略述しておきたいと思います。

背景の指定

背景関連のスタイルを指定する方法についてまとめておきます。 document.getElementById("id名").style以降の部分について掲載しています。背景関連のCSSを説明したページにリンクも設けいているので、ご利用ください。

backgroundColor: 背景色を指定します。右辺はカラー名またはカラーコードを記入します。
backgroundImage: 背景画像を指定します。右辺は「url(背景画像のURL)」と記述します。
backgroundRepeat: 背景画像の並べ方を指定します。; 右辺「repeat」は縦横に敷きつめます; 右辺「no-repeat」は背景画像１つだけ表示; 右辺「repeat-x」は横方向のみ繰り返し; 右辺「repeat-y」は縦方向のみ繰り返し
backgroundPosition: 背景画像の表示位置を指定します。右辺に(横位置縦位置)と記述します。; 横位置はleft,center,rightのいずれか; 縦位置はtop,center,bottomのいずれか
backgroundAttachment: 背景画像の固定方法を指定します。; 「fixed」は固定、「scroll」はスクロールさせます。

枠線に関連したスタイルを指定する方法についてまとめておきます。 document.getElementById("id名").style以降の部分について掲載しています。

borderColor: 枠の色を指定します。右辺はカラー名またはカラーコードを記入します。
borderStyle: 枠のスタイルを指定します。; 右辺はnone,solid,double,dotted,dashed,groove,ridge,inset,outsetの何れかを記入します。
borderWidth: 枠線幅を指定します。

マウスカーソルの形状を変化させる方法について述べておきます。リンクやボタン以外でもクリックできることを示したりする場合に使います。

document.getElementById("id名").style.cursor: マウスカーソルの形状を指定します。以下のようなものがあります。; default…一般的な矢印状のカーソルです。; pointer…リンク等の上でクリックできることを示す指差し形状のものです。; help…矢印の横に？マークが付くタイプのカーソルです。; wait…昔で言う砂時計状態になります。

この他にも様々なスタイルを変更することが可能です。全てを取り上げることはできないので、詳しく知りたい方はリファレンス本などを購入されると良いでしょう。