【jQuery】CSSプロパティを直接操作する方法（css()メソッド）

こんにちは、かつコーチです。

前回は addClass や toggleClass を使って、CSSクラスを付け外しする方法を紹介しました。

クラスの付け外しは便利ですが、「この要素の色だけ、JavaScript側で計算した値に変えたい」というように、あらかじめクラスを用意しておけないケースもあります。

今回はそんなときに使う css()メソッド（要素のCSSプロパティを直接読み書きするjQueryのメソッド）について解説します。

基本の書き方

css()の基本形は、プロパティ名と値を文字列で渡す形です。

$('.box').css('color', 'red');
$('.box').css('font-size', '20px');

プロパティ名はCSSの書き方（ハイフンつなぎ）でも、キャメルケース（fontSizeのような書き方）でも、どちらでも動きます。

// どちらも同じ結果になる
$('.box').css('font-size', '20px');
$('.box').css('fontSize', '20px');

プロパティが複数ある場合、css()を何度も呼ぶよりオブジェクト形式でまとめて渡す方がすっきり書けます。

$('.box').css({
  color: 'red',
  fontSize: '20px',
  backgroundColor: '#f0f0f0',
  padding: '16px'
});

オブジェクトのキーにはキャメルケースを使うのが一般的です。

background-colorのようにハイフンを含むプロパティ名は、オブジェクトのキーとしてそのまま書くとエラーになるため、キャメルケースのbackgroundColorにしておくと安全です。

css()は値を設定するだけでなく、現在の値を取得することもできます。

const currentColor = $('.box').css('color');
console.log(currentColor); // "rgb(255, 0, 0)" のような形式で返る

取得した値は、ブラウザが解釈した後の計算済みの値（computed style）になる点に注意してください。

自分で'red'と指定していても、取得時には"rgb(255, 0, 0)"のようなRGB形式で返ってくることが多いです。

私がcss()を初めて使ったとき、単位（pxなど）を付け忘れて、スタイルがまったく反映されない現象にハマりました。

コンソールにエラーは出ないのに、見た目だけが変わらない、という一番厄介なパターンです。

ブラウザの検証ツールで要素を確認したところ、width: 300;という無効な値がそのままスタイルに入っていて、原因が分かりました。

$('.box').css('width', 300);
// widthプロパティに単位なしの数値を渡すとブラウザが無視することがある

ブラウザによっては単位なしの数値を自動でpxと解釈してくれる場合もありますが、プロパティによっては無効な値として扱われ、スタイルが反映されません。

$('.box').css('width', '300px');
// 単位を含めた文字列を渡すと確実に反映される

なお、widthやheightなど一部のプロパティに限っては、jQueryが数値をそのまま渡すと自動的にpxを補完してくれる仕様になっています。

$('.box').css('width', 300);
// widthとheightは実はこれでも動く（jQueryがpxを補完する）

ただし、この自動補完はすべてのプロパティで働くわけではありません。

marginやpaddingなどでも動きますが、迷ったときは単位を省略せずに書く習慣をつけておくと、余計なつまずきを避けられます。

css()は値を瞬時に書き換えるメソッドです。

似たメソッドにanimate()（数値プロパティの値をアニメーションさせながら変化させるメソッド）がありますが、両者の役割は異なります。

// css()は一瞬で切り替わる
$('.box').css('opacity', 0.5);

// animate()は指定時間かけてなめらかに変化する
$('.box').animate({ opacity: 0.5 }, 300);

「見た目を一発で切り替えたいだけ」ならcss()、「なめらかに変化させたい」ならanimate()、という使い分けが基本になります。

animate()は数値で表現できるプロパティ（opacityやwidthなど）にしか使えないため、colorのような値には別途プラグインが必要になる点も覚えておくと良いです。

次回は、on()を使ったイベント設定の方法を解説します。

CSSプロパティの操作と組み合わせることで、「クリックしたら色を変える」といった動きが作れるようになります。