デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.css( )CSSプロパティの取得/設定

構文

cssプロパティの取得返値:文字列
jQo.css( プロパティ名 )ver1.0〜
複数のcssプロパティを取得返値:objectオブジェクト
jQo.css( 配列 )ver1.9〜
配列を利用して複数のプロパティをまとめて取得できます。
返値は配列ではなくobjectオブジェクトなことに注意してください。
cssプロパティの設定返値:jQueryオブジェクト
jQo.css( プロパティ名, 値 )ver1.0〜
jQo.css( objectオブジェクト )ver1.0〜
jQo.css( プロパティ名, function )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)を取得し、アラートで表示します。

$("button").click(function(){
	var ans = $("div").css("height");
	alert(ans);
})

結果としてbuttonをクリックすると、div要素の高さが「50px」と表示されます。返される値は文字列のため、計算に利用できません。高さを数値で取得したい場合はheightメソッドを利用すると良いでしょう。

複数の要素からプロパティを取得できません

cssメソッドは指定した要素が複数ある場合、最初の要素からのみ値を取得します。サンプル(css/02.html)を開いてbody内にdiv要素が2つあり、最初のdiv要素にはtestのクラス属性が付加され高さが変更されていることを確認してください(高さは上から100px,50pxになっています)。

<div class="test"></div>
<div></div>

jQueryはcss/01.htmlから変更有りません。buttonをクリックするとアラートで100pxと表示され、最初のdiv要素の高さしか取得できていないことが確認できます。もし複数の要素から値を取得したい場合はmapメソッドを利用します。→ページ最下段の「メモ」を参照してください。

プロパティの設定は複数でもOK

cssメソッドは第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増えます。

$("button").click(function(){
	$("div").css("width", "+=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です。

myObj = new Object();
myObj.width = 100;
myObj.height = 100;
myObj.backgroundColor = "#C09";

結果として、buttonをクリックするとdiv要素の幅と高さが100pxになり、背景色が赤紫になります。

引数にFunctionを設定

サンプル(css/06.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されcssメソッドの第2引数にfunctionの「cssFunc」が設定されています。

$("button").click(function(){
	$("div").css("width", cssFunc);
})

cssメソッドの第2引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号、現在の値)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に設定したい値をreturnで返すようにします。

cssメソッドに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在の値){
 任意の処理(引数を利用可能)
 return 設定する値;
}

サンプルcss/06.htmlで利用したcssFuncは以下の様になっており、index番号に1足した数値に50かけた値を返すようにしました。

function cssFunc(index,value){
	return (index+1)*50;
}

結果としてbuttonをクリックするとdiv要素の幅が上から順に50px,100px,150px,200px,250pxとなります。

複数のcssプロパティをまとめて取得

前々項で説明したように複数のプロパティをまとめて設定することはできたのに、複数のプロパティをまとめて取得することはできませんでした。しかし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)はアラートで表示して確認します。
$("button").click(function(){
	var test = $("div").css(["width", "height", "background-color"]);
	alert(test);
})

buttonをクリックするとアラートで「object object」と表示され、オブジェクトobjectが返ってくることが確認できます。各値を確認するためにはプロパティ名を利用します。サンプル(css/07b.html)を開いてjQueryのアラートの部分が以下の様に変更されていることを確認してください。

$("button").click(function(){
	var test = $("div").css(["width", "height", "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メソッドを利用して複数の要素の値を取得」にあるようにmapメソッドを利用してください。

メモ

特定のcss項目を削除する

cssメソッドで設定したcss設定は空の文字列を設定することで削除することができます。
サンプル(css/test01.html)を開いて、body要素内にdiv要素とbutton要素が2つあることを確認してください。id属性がblueのbuttonをクリックすると以下の処理が実行され、div要素の背景色が青になります。

$("button#blue").click(function(){
	$("div").css("background-color", "#09C");
});

続いて以下の部分を確認してください。id属性がremoveのbuttonをクリックすると「background-color」に空の文字列を設定しています。実際にremoveボタンをクリックすると背景色の設定が削除されるのが確認できます。

$("button#remove").click(function(){
	$("div").css("background-color", "");
});

しかし、このテクニックは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要素の高さがアラートで表示されます(値は配列です)。