エレメントを操作する (2/5)

■スタイルの操作

一般にタグの表示は、スタイルシートを使って設定します。これは、タグのstyle属性に、スタイルシートのテキストを設定して利用します。

エレメントにも、この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>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail