石田修二ホームページ　＞　JavaScript講座　＞    （サイト内検索）

ページの背景を変えてみる

タイトルの通りです。JavaScriptからHTMLとCSSを操作するための基本を学びましょう。

背景色を変更する

ソースは次の通りです。

<script>
function changeBg() {
  document.body.style.backgroundColor = '#ffcc44';
}
</script>

<script>内に関数を定義して，「背景色を変更する」ボタンのクリックでスクリプトを実行しています。

なお，JavaScriptから HTML や CSS を操作するには，DOM という仕組みを使います。

CSSでは background-color と書きますが，JavaScriptではプロパティ名にハイフンが使えないので，backgroundColor と書きます。例えば，フォントサイズを変更するならば，fontsize プロパティの値を書き換えます。

<button onclick="changeBg()">背景色を変更する</button>

onclick属性のことをイベントハンドラーと呼びます。イベントハンドラーはイベント発生時にchangebg()関数が実行されます。

イベントについて

HTMLファイルが書き換えられているわけではないので，ブラウザを再読み込みすると元の背景色に戻ります。

リンクはご自由にどうぞ。

【石田修二トップページ】　　【いろいろ】

Last modified: 2014-04-28 01:45:02