エレメントを操作する (2/5)
作成:2010-04-02 17:16
更新:2010-05-11 19:02
更新:2010-05-11 19:02
■スタイルの操作
一般にタグの表示は、スタイルシートを使って設定します。これは、タグのstyle属性に、スタイルシートのテキストを設定して利用します。
エレメントにも、このstyle属性は「style」プロパティとしてちゃんと用意されています。ここに、さまざまなスタイルシートの設定が保管されます。ただし! HTMLでは、styleには、さまざまなスタイルシートの属性がひとまとまりのテキストとして設定されていましたが、DOMオブジェクトの場合はそうではありません。styleには、スタイルごとにプロパティが用意されており、それを設定することでスタイルシートを操作できます。
例えば、テキストの色や背景色は、「color」「background」といったプロパティとして用意されています。ここに、表示する色の値をテキストとして設定してやれば、そのエレメントに対応するタグの色が変わります。
下のリストに、簡単なサンプルをあげておきます。入力フィールドに色の値を入力してボタンを押すと、表示されているメッセージの背景色が変わります。ここでは、入力フィールドのvalueを取り出し、ターゲットである<div>タグのエレメントを取得して、そのstyle.backgroundの値を変更しています。ボタンを押すと、瞬時にメッセージの背景色が変わります。エレメントのスタイルを操作すると、こうした表示の操作が簡単に行えるのです。
エレメントにも、このstyle属性は「style」プロパティとしてちゃんと用意されています。ここに、さまざまなスタイルシートの設定が保管されます。ただし! HTMLでは、styleには、さまざまなスタイルシートの属性がひとまとまりのテキストとして設定されていましたが、DOMオブジェクトの場合はそうではありません。styleには、スタイルごとにプロパティが用意されており、それを設定することでスタイルシートを操作できます。
例えば、テキストの色や背景色は、「color」「background」といったプロパティとして用意されています。ここに、表示する色の値をテキストとして設定してやれば、そのエレメントに対応するタグの色が変わります。
※利用例
下のリストに、簡単なサンプルをあげておきます。入力フィールドに色の値を入力してボタンを押すと、表示されているメッセージの背景色が変わります。ここでは、入力フィールドのvalueを取り出し、ターゲットである<div>タグのエレメントを取得して、そのstyle.backgroundの値を変更しています。ボタンを押すと、瞬時にメッセージの背景色が変わります。エレメントのスタイルを操作すると、こうした表示の操作が簡単に行えるのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html> <head> <script type="text/javascript"> <!-- function doAction(){ var text1 = document.getElementById("text1"); var target = document.getElementById("target"); target.style.background = text1.value; } //--> </script> </head> <body> <H1>TEST.</H1> <div id="target">※背景の変更</div> <input type="text" id="text1"> <input type="button" onclick="doAction();" value="追加"> </body> </html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る