第3章　「スタイルシートへのアクセス」

jQueryでスタイルシートにアクセスする場合は専用のメソッドを使います。そのメソッドはcss()です。このcss()メソッドは渡されたパラメータの種類と数によって異なる動作をします。
サンプル1のようにcss()メソッドのパラメータが2つの場合はスタイルシートの設定になります。最初のパラメータがスタイルシートプロパティ名、二番目のパラメータが設定値を示します。
css()メソッドのパラメータが1つでスタイルシートプロパティ名を示す文字列の場合には、スタイルシートの値を読み出します。サンプル2ではcolorプロパティの値を読み出しアラートダイアログに表示します。（サンプル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");
}


【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="getCSSValue()">
</form>
</body>
</html>


【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+"」です");
}

[目次へ]