【jQuery入門】ページのスタイルを変更する

CSSのプロパティを設定する

jQueryでCSSのプロパティを設定するには、cssメソッドを使う

ハッシュ({})を使ってカンマ区切りで複数指定できる
ハッシュを使う場合は、キャメルケースで記述するのが慣例

<ul id="sample1-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  $("#sample1-list .js").css("background-color", "red");
  $("#sample1-list .css").css({
    backgroundColor: "blue",
    "font-size": "1.5rem"
  });
});

See the Pen
jQuery3-8 by shinjiezumi (@sezumi)
on CodePen.

CSSプロパティの値を取得する

cssメソッドでプロパティ名だけを指定すると、対応する値を取り出すことができる

$()関数が複数の要素に合致した場合にも、cssメソッドは最初の一つについてのみ情報を返す。

これは取得系メソッド共通の動き。

<ul id="sample2-list">
  <li class="jquery" style="background-color: red">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  let backgroundColor = $("#sample2-list .jquery").css("background-color");
  console.log(backgroundColor); // rgb(255, 0, 0)
});

See the Pen
jQuery4-1 by shinjiezumi (@sezumi)
on CodePen.

スタイルクラスを適用するaddClassメソッド

cssメソッドによるスタイルの操作は手軽で便利ですが、問題もある。

それはJavaScriptのコードの中にスタイル情報が混在してしまう点。

スタイルを修正するのに、スタイルシートとスクリプトコードの両方を見なければならないのでなかなか厄介。

例えば、デザイナーとプログラマーが分業している場合、jQueryを知らないデザイナーの場合、スタイルの修正はプログラマーの責任で行う必要が出てしまう。

そこで、基本的にはcssメソッドは手軽なスタイル操作の手段と割り切り、本格的なアプリケーションではaddClassメソッドを使う。

<ul id="sample3-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  $("#sample3-list .jquery").addClass("sample");
});

.sample {
  background-color: blue;
  font-size: 1.5rem;
}

See the Pen
jQuery4-2 by shinjiezumi (@sezumi)
on CodePen.

スタイルの定義がscript要素から取り除かれたことで、コードはずいぶんとすっきりする。

これであればスタイルの変更があった場合にも、スタイルクラスだけを修正すればよいので、作業がやりやすくなる

また、addClassメソッドでは複数のスタイルを空白区切りでまとめて適用することもできる。

スタイルクラスを除外するremoveClassメソッド

適用されたスタイルクラスを除外するには、removeClassメソッドを利用する

addClassメソッドと同じく、空白区切りで複数のクラスをまとめて除外することもできる。

<ul id="sample4-list">
  <li class="jquery sample">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css sample">CSS</li>
</ul>

$(function () {
  $("#sample4-list .jquery").removeClass("sample");
});

.sample {
  background-color: blue;
  font-size: 1.5rem;
}

See the Pen
jQuery4-3 by shinjiezumi (@sezumi)
on CodePen.

スタイルクラスを交互に適用／除外するtoggleClassメソッド

スタイルクラスの適用と除外を交互に行いたい場合、toggleClassメソッドを利用する

<ul id="sample5-list">
  <li class="jquery">jQuery</li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  $("#sample5-list .jquery").toggleClass("sample");
  alert("切り替え");
  $("#sample5-list .jquery").toggleClass("sample");
});

.sample {
  background-color: blue;
  font-size: 1.5rem;
}

See the Pen
jQuery4-4 by shinjiezumi (@sezumi)
on CodePen.

toggleClassメソッドは例えばクリックするたびにスタイルを適用／除外するようなコードで有用です。