)ver1.9〜配列を利用して複数のプロパティをまとめて取得できます。返値は配列ではなくobjectオブジェクトなことに注意してください。)ver1.4〜機能jQueryオブジェクトで指定した要素のcssプロパティの値を取得/設定することができます(ただし値を取得する場合は最初の要素からしか取得できません)。引数にObjectオブジェクトを利用することで、複数のプロパティをまとめて設定することができます。ver1.4からは第2引数にfunctionを指定することも可能で、条件によって設定する値を変更するなど高度な処理にも対応できます。ver1.9からは引数に配列を利用して、複数のプロパティをまとめて取得できます。引数は配列ですが、返値はobjectオブジェクトなので、プロパティ名を利用して値を取得することに注意してください。javaScriptではブラウザによってcssプロパティの扱いが異なり処理が面倒です。jQueryのcssメソッドは、それらの差異を吸収し非常に簡単にcssプロパティの取得と設定が可能です。利用できるcssプロパティはcss形式(例:background-color)とDOM形式(例:backgroundColor)の両方です。解説cssプロパティを取得するサンプル(css/01.html)を開いてbody内にdiv要素が1つあることを確認してください。<div></div>jQueryは以下の様に記述され、buttonをクリックするとdiv要素の高さ(cssプロパティはheight)を取得し、アラートで表示します。$("div").css("height");alert(ans);})結果としてbuttonをクリックすると、div要素の高さが「50px」と表示されます。返される値は文字列のため、計算に利用できません。heightメソッドを利用すると良いでしょう。複数の要素からプロパティを取得できませんcssメソッドは指定した要素が複数ある場合、最初の要素からのみ値を取得します。サンプル(css/02.html)を開いてbody内にdiv要素が2つあり、最初のdiv要素にはtestのクラス属性が付加され高さが変更されていることを確認してください(高さは上から100px,50pxになっています)。class="test"></div><div></div>jQueryはcss/01.htmlから変更有りません。buttonをクリックするとアラートで100pxと表示され、最初のdiv要素の高さしか取得できていないことが確認できます。mapメソッドを利用します。→ページ最下段の「メモ」を参照してください。プロパティの設定は複数でもOKcssメソッドは第2引数に値を設定することで、cssプロパティの値を設定できます。このとき要素は複数でもOKです。サンプル(css/03.html)を開いてbody内の構成がcss/02.htmlと同じ事を確認してください。jQueryはすこし変更され、以下の様にcssメソッドの第2引数に「20px」と設定されています。$("button").click(function(){$("div").css("height","20px");})結果として、buttonをクリックすると2つのdiv要素とも高さが20pxになります。cssプロパティの種類によっては第2引数に数値を設定することもできます。サンプル(css/03b.html)では以下の様に第2引数の値に20と「数値」を設定していますが、正常に機能します。$("button").click(function(){$("div").css("height",20);})算術複合代入子の利用v1.6からはcssメソッドの第2引数に算術複合代入子(-=や+=等)を設定することで、相対的な値の変更が可能になりました。サンプル(css/04.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとdiv要素の幅(cssプロパティはwidth)が10px増えます。"+=10");})結果として、buttonをクリックする度にdiv要素の幅が10pxずつ増えていきます。算術複合代入子(サンプルでは「+=10」)は文字列で設定(つまりクォートが必要)します。複数のプロパティをまとめて設定(objectオブジェクトの利用)objectオブジェクトを利用することで、まとめて複数のcssプロパティを設定できます。サンプル(css/05.html)を開いてbody内の構成がcss/01.htmlと同じことを確認してください。jQueryは以下の様に記述され、cssメソッドの引数としてmyObjが設定されています。$("button").click(function(){$("div").css(myObj);})myObjは以下の様に設定されたObjectオブジェクトで、変更したいcssプロパティとその値が設定されています。幅(width)と高さ(height)は100pxに、背景色(backgroundColor)は#C09です。"#C09";結果として、buttonをクリックするとdiv要素の幅と高さが100pxになり、背景色が赤紫になります。引数にFunctionを設定サンプル(css/06.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されcssメソッドの第2引数にfunctionの「cssFunc」が設定されています。cssFunc);})cssメソッドの第2引数に設定するFunctionは以下の様な構文になっています。引数(インデックス番号、現在の値)を受け取ります。これらの引数の値は{}内の処理で利用することができます。任意の処理の後で最終的に設定したい値をreturnで返すようにします。設定する値;}サンプルcss/06.htmlで利用したcssFuncは以下の様になっており、index番号に1足した数値に50かけた値を返すようにしました。(index+1)*50;}結果としてbuttonをクリックするとdiv要素の幅が上から順に50px,100px,150px,200px,250pxとなります。前々項で説明したように複数のプロパティをまとめて設定することはできたのに、複数のプロパティをまとめて取得することはできませんでした。v1.9からは引数にプロパティ名を設定した配列を利用することで、複数のプロパティをまとめて取得することができるようになりました。サンプル(css/07.html)を開いてbody内にdiv要素が1つあり、cssが以下の様に設定されていることを確認して下さい。div{margin:5px;width:50px;height:50px;color:#fff;background-color:#09C;}続いてjQueryを確認して、cssメソッドの引数に配列が設定されているのを確認してください。今回はwidth、height、background-colorの値を取得します。取得した値(変数test)はアラートで表示して確認します。object」と表示され、オブジェクトobjectが返ってくることが確認できます。各値を確認するためにはプロパティ名を利用します。サンプル(css/07b.html)を開いてjQueryのアラートの部分が以下の様に変更されていることを確認してください。"background-color"]);alert(test.width);})結果として、buttonをクリックすると「50px」と表示され、widthの値が取得できていることを確認できます。この更新に伴い、複数のdiv要素からまとめて値を取得できるようになっていないかな?と調べてみましたが、やはりダメでした。最初の要素の値しか取得できません。サンプル(css/08.html)にはwidthが30pxと100px、2つのdiv要素があります。jQueryはcss/07b.htmlから変更ありません。buttonをクリックすると最初のdiv要素の幅である30pxしか取得できないのが確認できます。mapメソッドを利用してください。メモ特定のcss項目を削除するcssメソッドで設定したcss設定は空の文字列を設定することで削除することができます。サンプル(css/test01.html)を開いて、body要素内にdiv要素とbutton要素が2つあることを確認してください。id属性がblueのbuttonをクリックすると以下の処理が実行され、div要素の背景色が青になります。"#09C");});続いて以下の部分を確認してください。id属性がremoveのbuttonをクリックすると「background-color」に空の文字列を設定しています。実際にremoveボタンをクリックすると背景色の設定が削除されるのが確認できます。"");});しかし、このテクニックはhtml上で設定されたcss設定には利用できません。サンプル(css/test01b.html)を開いて、以下の様にhtml上でcss設定されているのを確認してください。div{color:#f00;background-color:#09C;}この場合はcssメソッドでは削除できないため、removeボタンをクリックしても背景色は青のままです。mapメソッドを利用して複数の要素の値を取得サンプル(css/02.html)で確認したように、複数の要素からcssプロパティの値を取得しようとしても最初の要素からしか取得できません。mapメソッドを利用することで対応可能です。サンプル(css/test02.html)ではbuttonをクリックすると、各div要素の高さがアラートで表示されます(値は配列です)。