エレメントを操作する (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プログラミング入門」に戻る