DOMオブジェクトの基本操作 (3/5)
作成:2010-04-04 11:48
更新:2010-05-11 20:58
更新:2010-05-11 20:58
■スタイルシートの操作
jQueryオブジェクトは、text/html/valといった表示内容だけを操作するものではなく、その他にもさまざまな機能があります。例えば、「スタイルシートの操作」です。これは「css」というメソッドとして用意されています。これは以下のように利用します。
・値の取得
今度は、要素の大きさを操作してみましょう。下のリストに掲載したサンプル（２番目）は、数字を入力してボタンを押すと、<div>タグの大きさ（縦横幅）が変更されます。ここでは、
・値の取得
変数 = 《jQuery》.css( 属性名 );・値の変更
《jQuery》.css( 属性名 , 値 );これも、やはりcssメソッドだけで値の取得と変更の両方が可能です。属性名に、操作するスタイルの属性名を指定します。一例として、下のリスト部分に、テキスト色と背景色を操作するサンプル（１番目）をあげておきましょう。ここでは、
$('#message1').css('color',str);
$('#message2').css('background',str);このようにしてテキスト色と背景色を設定しています。属性名には、スタイルシートの属性名がそのまま使われていることがわかるでしょう。今度は、要素の大きさを操作してみましょう。下のリストに掲載したサンプル（２番目）は、数字を入力してボタンを押すと、<div>タグの大きさ（縦横幅）が変更されます。ここでは、
$('div').css('width',num);
$('div').css('height',num);このようにして、縦横幅を変更しています。スタイルシートのどんな属性も、このようにcssメソッドで変更することができるのです。(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※テキスト色・背景色を変更する
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
var str = $('#text1').val();
$('#message1').css('color',str);
$('#message2').css('background',str);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message1">色の値を入力：</div>
<div id="message2">色の値を入力：</div>
<input type="text" id="text1">
<input type="button" onclick="doAction();" value="Click">
</body>
</html>
※大きさを変更する
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
var num = $('#text1').val();
$('div').css('width',num);
$('div').css('height',num);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message1" style="background:#FAA">値を入力：</div>
<div id="message2" style="background:#AAF">値を入力：</div>
<input type="text" id="text1">
<input type="button" onclick="doAction();" value="Click">
</body>
</html>
※関連コンテンツ