株式会社RJC　技術サイト

スタイルを操作しよう！

このページではスタイルシートを操作するcss関数を解説していきます。css関数はstyle属性を操作する関数ではありません。
スタイルは外部CSSファイルに定義することが望ましい方法ですが、諸般の事情によりcss関数を使用する場合はその点に気を付けてください。実際のコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery入門研修｜スタイル操作実践</title>
<style type="text/css">
#bar {
	background-color:orange;
}
a {
	background-color:black;
	color:green;
}
</style>
</head>
<body>
	<a href="http://jquery.com/" id="bar">jQuery</a>
	<input type="button" id="foo" value="ボタン">
	<script src="../js/jquery-1.11.2.min.js"></script>
	<script>
		$(function() {
			$("#foo").click(function() {
				var $a = $("a");
				console.log($a.css("background-color"));
				$a.css("background-color", "yellow");
				console.log($a.css("background-color"));
			});
		});
	</script>
</body>
</html>

まず、8行目でid属性がbarの背景色をオレンジにしていますね。11行目ではaタグの背景色を黒にしています。
更に25行目では「ボタン」クリック時にaタグの背景色を黄色に指定しています。
さて、初期表示時にjQueryリンクの背景色はいったい何色でしょうか？また、「ボタン」クリック後には何色でしょうか？
少し考えてみてからここをクリックして実際に見てみましょう。ボタンをクリックして、コンソールも見てみましょう。

おそらく何かしら予想と違う結果になったのではないでしょうか。
プロパティ名を引数にしてcss関数を実行すると、その時点で適用されている計算（解釈）後のスタイルが文字列で返ってきます。
スタイルシートで「オレンジ色」を表すには「orange」、「#ffa500」、「rgb(255,165,0)」その他rgba、hsl、hsla...っと色々な書き方があります。
更に言うと「オレンジ色」は基本16色ではないためCSS Level 1では使えず、古いブラウザーだとどうなるかわかりません。
色の他、サイズも「px」、「em」、「%」など、様々な単位がありますね。つまり、css関数はできるだけ使わないようにしましょう。
さて、css関数にプロパティ名と値の2つ引数を渡すと、スタイルが設定されます。css関数の使い方は大きくこの2つになります。
それでは実践として「1_10.html」を編集して、ボタンをクリックしたらリンクの背景色が黄色、文字色が赤色になるようにしてみましょう。

$(function() {
	$("#bar").click(function() {
		$("#foo").css("background-color", "yellow").css("color", "red");
	});
});

解答例のポイントをいくつか解説します。
まず、セレクターには出来るだけIDセレクターを使いましょう。
そして同じセレクターを何回も呼び出すことは避け、変数に格納するか、解答例のようにメソッドチェーンを使いましょう。
attr関数やcss関数の公式APIを見ましたか？引数を2つ渡した時の戻り値はjQuery、つまり$objです。
今回のケースではcss関数を使った$obj、つまり「$("#foo")」で取得した$objが戻り値になるので、この様な書き方ができます。
メソッドチェーンは頻繁に使われますが、あまりにも長いチェーンは可読性や保守性が落ちますので注意しましょう。
目安としては、各開発環境で横スクロールなしで見える範囲に収め、見切れてしまう場合は一旦変数に格納するようにすると良いでしょう。
「関数チェーンじゃないの？」っと思った方は鋭いですが、気にしないようにしましょう。
メソッドは関数オブジェクトなのです。そしてメソッドも関数も変数もオブジェクトなのです。
JavaScriptのお話になるので詳細は割愛して「ほぼ同じ」だと思ってください。

くどいようですが、スタイルは出来るだけ外部CSSファイルに定義し、変更する場合はcss関数の使用は極力避け、クラス属性を操作するようにしましょう。
ここでは解説しませんが、css関数の他にもスタイル関係の関数があるので、必要な時は公式APIを見てください。
最後にもう一度css関数の構文をおさらいして次のページに進みましょう。

// $objのスタイル"プロパティ名"の値をfooに格納
var foo = $obj.css("プロパティ名");

// $objのスタイル"プロパティ名"に"値"を設定
$obj.css("プロパティ名", "値");

TOPへ戻る