rio's blog

FC2 Blog Ranking に参加してます。クリックよろしくお願いします！

1. --/--/--(--) --:--:--|
2. スポンサー広告

少し空きましたが、JavaScript 超入門4回目です。気負わずに行きましょう～。

今日は、JavaScript を使って html 要素のスタイルを動的に変更する方法について説明します。

一番簡単な方法は、document.getElementById(id) として取得したオブジェクトの style 属性にアクセスして、変更したいスタイルを設定する方法です。

var obj = document.getElementById(id);
obj.style.変更したいスタイル=変更後の値;

とします。例えば、要素の表示／非表示を表すスタイルとして display があります。現在表示されている要素を非表示にしたい場合は

var obj = document.getElementById(id);
obj.style.display = "none";

とするだけでO.K.です。

ところが！この方法は簡単ですが、複数のスタイル設定を変えたい場合には何度も書かなくてはならず、若干面倒です。

この様な場合は、思い切って要素のクラス自体を変えてしまいましょう。

var obj = document.getElementById(id);
obj.className = newClassName;

の様にすることで、要素のクラスを変更することができます。これにより、変更後のクラスに対するスタイル設定が適用される様になります。

例えば以下の様にスタイルが設定されているとします。

h1 {
        border:1px solid #000000;
        color:#000000;
        background-color:#ffffff;
}

h1.caution {
        border:2px solid #00ffff;
        color:#ff0000;
        background-color:000000;
}

この場合に、デフォルトの h1 を caution スタイル設定で表示したければ

var obj = document.getElementById(id);
obj.className = "caution";

とします。元に戻したい場合は

var obj = document.getElementById(id);
obj.className = "";

の様にすれば、特にクラスを設定していない状態に戻ります。

今日はこれまで…

FC2 Blog Ranking に参加してます。クリックよろしくお願いします！

テーマ:WEBデザイン - ジャンル:コンピュータ

1. 2008/06/09(月) 10:00:00|
2. html+css+js
3. | トラックバック：0
4. | コメント：0