第3章　「プロパティを一括で書き替える」

jQueryのスタイルシートを操作するcss()メソッドを使って、複数のスタイルシートプロパティを書き換えてみます。css()でスタイルシートを設定した場合、戻り値としてjQueryオブジェクトが返されます。このため、さらにcss()メソッドを使ってスタイルシートプロパティを設定できます。
サンプル1は連続してcss()メソッドを使い、文字色と背景色を設定しています。
しかし、サンプル1のように記述するとcss()メソッドが連続してしまい読みやすいとは言えません。このため、jQueryのcss()メソッドではパラメータが1つでプロパティリスト形式の場合、一括してスタイルを設定する処理が行なわれます。プロパティリストは {プロパティ名 : 設定値 } のペアをカンマで区切って列記します。 サンプル2はサンプル1をプロパティリスト形式に書き換えたものです。（サンプル1を実行する）（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQueryとは？</p>
<form>
<input type="button" value="書き替え" onClick="changeCSS()">
</form>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
function changeCSS(){
$("p").css("color", "#ff0000").css("background-color", "#000080");
}


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
p {
color:green;
}


【JavaScript】
function getCSSValue(){
var cssValue = $("p").css("color");
alert("色の値は「"+cssValue+"」です");
}


【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQueryとは？</p>
<form>
<input type="button" value="書き替え" onClick="changeCSS()">
</form>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
function changeCSS(){
$("p").css({ "color" : "#ff0000", "background-color" : "#000080"});
}

[目次へ]