jQuery逆引きリファレンス
要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
要素のスタイルプロパティを変更するには、cssメソッドを利用します。例えば以下は、class="dotnet"である要素のテキスト色を赤（Red）に変更するコードです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="list">
<li class="dotnet">ASP.NET MVC 5実践プログラミング</li>
<li>JavaScript逆引きレシピ jQuery対応</li>
<li>Ruby on Rails 4アプリケーションプログラミング</li>
<li>10日でおぼえるjQuery入門教室 第2版</li>
<li class="dotnet">独習ASP.NET 第4版</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$('.dotnet').css('color', 'Red');
});
</script>
</body>
</html>
|
数値プロパティを相対値で指定する
数値プロパティである場合には、例えば15pxのような絶対値を設定できる他、+=5／-=5のような形式で「現在値に5加える／減らす」のような相対値の指定もできます。例えばフォントサイズを8px増やすならば、以下のように表せます。
|
$('.dotnet').css('font-size', '+=8');
|
複数のスタイルプロパティをまとめて設定する
{ プロパティ名: 値... }形式のハッシュを渡すことで、複数のスタイルプロパティをまとめて設定することもできます。
|
$('.dotnet').css({
fontSize: '16pt', // 1camelCase形式で指定
'background-color': 'Lime' // 2ハイフン形式で指定
});
|
ハッシュ形式では、プロパティ名はcamelCase形式（＝単語の区切りは大文字）で表す点に注目です（1）。JavaScriptでは識別子にハイフン-を含めることはできないからです。もしもハイフン形式の名前を利用する場合には、2のようにプロパティ名をクォート'でくくってください。
スタイルプロパティの現在値を取得する
cssメソッドでは、スタイルプロパティを設定するだけではありません。以下のようにプロパティ名を文字列／配列で指定することで、現在値を取得することもできます*1。
- *1 プロパティ名を配列で指定できるのは、jQuery 1.9以降のみです。
|
console.log($('.dotnet').css('font-size'));
// 結果：21px
console.log($('.dotnet').css([ 'font-size', 'background-color' ]));
// 結果： {font-size: "21px", background-color: "rgb(0, 255, 0)"}
|
$()関数が複数の要素にマッチした場合にも、cssメソッドが取得するのは「最初の要素についてだけ」である点に注意してください。
API：.css() カテゴリ：CSS｜Manipulation（要素の操作） > Style Properties（スタイルプロパティ）
※以下では、本稿の前後を合わせて5回分（第3回～第7回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？
基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。
4. 要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
5. 【現在、表示中】≫ 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
6. 要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）
要素にclass属性の値を設定／削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。
