Re:Creator’s Kansai

こんにちは。to-Rの西畑です。jQueryによるJavaScript入門、12回目はcssを利用してCSSの制御を行ってみたいと思います。

CSSの操作ではCSSの変更まで取り上げましたが、cssメソッドを利用すれば変更のみならずCSSの取得も可能です。

まずはサンプルをご覧ください。

左上の■をクリックするとそのbodyのbackground-colorをそのテキストの文字に変更するサンプルになります。

$(function(){
	$("li").click(function(){
		$("body").css("background",$(this).css("color"));
	})
});

CSSの取得

CSSの取得は以下のように記述します。

$("CSSセレクタ").css("プロパティ")

CSSの操作では第2引数で値を設定しているのに対して、取得では第2引数に値を設定しません。

$(this).css("color")

サンプルではクリックされた要素のcolorプロパティを取得して

$("body").css("background",$(this).css("color"));

body要素の背景色として設定しています。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中