DOMでその他のスタイルを指定する方法について

HOME
更新日:2013.10.04
HOMEJavaScript入門 > その他のスタイル指定

その他のスタイル指定

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

背景の指定

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

backgroundColor
背景色を指定します。右辺はカラー名またはカラーコードを記入します。
backgroundImage
背景画像を指定します。右辺は「url(背景画像のURL)」と記述します。
backgroundRepeat
背景画像の並べ方を指定します。
右辺「repeat」は縦横に敷きつめます
右辺「no-repeat」は背景画像1つだけ表示
右辺「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…昔で言う砂時計状態になります。

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