|
HTMLドキュメント内にあるElementオブジェクトのstyleプロパティを参照すると、そのエレメントのスタイルシートをJavaScriptから動的に変更することができます。スタイルシートでは、エレメントの色や大きさ、表示状態など「要素の見せ方」を指定できるので、スタイルシートを変えればこうした「見せ方」を自由に変更できるわけですね。 例えば、スクリプトであるエレメント（id:test）の文字の色を変えたければ、以下のようにします。 document.getElementById("test").style.color = 色指定;
スタイルシート（color属性）の変更テストテスト文字列 ボタンをクリックすると、testエレメント（<span id="test">テスト文字列</span>）のスタイルシート（style.color）を変更し、文字の色を変えます。 こうしたスタイルシートの動的変更の応用としては、あるボタンをクリックすると表示状態を切り替える、といったGUIの動作にあわせた表示内容の更新や時間の経過とともに表示スタイルを変更していくような処理が考えられるでしょう。たとえば、ボタンをクリックするとある項目を強調表示したり、関連項目の色を変えて目立たせる、といったことが可能になります。うまく使えば、WebのGUIをよりわかりやすいものに仕上げることができそうですね。 ただし、ブラウザによってはうまく機能しない場合やセキュリティ確保のためにユーザーがスクリプト動作を行わないよう設定している場合もあるので、スクリプトがうまく機能することを前提としたWeb作成は避けるようにした方が良いでしょう。 |