スポンサーリンク
スポンサーリンク

DOMを使用して、スタイルを動的に変更する

HTMLの見た目をよくするためにスタイルシートを使用することが普通です。綺麗なウェブページのレイアウトには、スタイルシートが利用されています。DOMを使用すると、スタイルシートのプロパティを操作できます。フォントの大きさや、背景色を変更することができます。サンプルコードの実行結果はこちら

styleプロパティ

DOMでは、スタイルシートのプロパティは、各ノードのstyleプロパティの下に個別に格納されています。サンプルプログラムのようにIDが「result」のdiv要素のノードを取得します。

textの配置を設定するtext-Alignプロパティを
「left」左寄せを設定するには下記ように書きます。

スタイルシートでは、テキストの配置をするプロパティ名は
「text-align」ですが、DOMでは「textAlign」でハイフン「-」がなく、
「alignの」の「a」が大文字になっています。

スタイルシートでは、要素の背景画像を
設定する場合は以下のように書きます。

対して、DOMではbackgroundImageでハイフン「-」が
なく、「image」の「I」を大文字にします。

visibilityプロパティ

スタイルシートvisibilityプロパティは、要素の表示・非表示を切り替えるプロパティです。
visibleは表示、hiddenは非表示です。

showHide関数

サンプルコードの42行目~85行目コメントアウトしましたのでそちらをご覧ください。

スタイルシートのプロパティ

DOMで設定可能な主なプロパティ。CSSを勉強したことがある人ならお馴染みなものばかりです。

backgroundColor 背景色
backgroundImage 背景画像
borderWidth 枠の太さ
borderColor 枠の色
color 文字の色
display 要素の表示・非表示(レイアウトが変更される)
visibility 要素の表示・非表示(レイアウトが変更されない)
fontFamily フォント名
fontSize フォントの大きさ
fontWeight フォン路の太さ
width コンテンツの幅
height コンテンツの高さ
position 要素の配置方法
top 上端の座標
left 左端の座標
lineHeight 行の高さ
margin コンテンツの外側に設ける余白
padding コンテンツの内側に設ける余白
textAlign テキストの配置

コメント

タイトルとURLをコピーしました