jQueryでcssを変更する方法【style属性/class属性を変更】

今回の記事は、

  • jQueryを使ってcssを変更したい
  • 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない

という方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


jQueryでcssを変更する方法

jQueryを使ってcssを変更するには、「style属性を変更する」方法と「class属性を変更する」方法があり、それぞれを実現するためには、以下のメソッドを使用します。

  • 1. style属性を変更する
  • css()メソッド
  • 2. class属性を変更する
  • addClass()メソッド、removeClass()メソッド、toggleClass()メソッド

それぞれ順を追って解説していきます。

jQueryでcssを変更する方法その1 style属性を変更する

まずご紹介するのは、「style属性を変更する」方法です。

HTML要素のstyle属性を変更するには、css()メソッドを使用しましょう。

css()メソッドで一つのプロパティのみを変更する場合

css()メソッドは、第1引数にプロパティを、第2引数にその値を指定します。

基本的な使い方

$(セレクタ).css("プロパティ", "値")

それでは早速、実際の実装例を見ながら確認していきましょう。

実装コード

<p id="test-text1">テストテキスト</p>

<button onClick="changeStyle1()">styleを変更</button>

<script>
function changeStyle1() {
  $("#test-text1").css("color", "red")
}
</script>

動作確認用

テストテキスト

上記の例では、ボタンをクリックすると、上部のpタグのstyle属性が変更(文字の色が「赤→黒」へ変更)されるよう実装しています。

とても簡単に実装できるのがお分かりいただけたかと思います。

css()メソッドで複数のプロパティを変更する場合

プロパティを一つ変更するのみであれば、上記の使い方で問題ないのですが、複数のプロパティを変更する場合には少しだけ注意が必要です。

基本的な使い方

$(セレクタ).css({ "プロパティ": "値", "プロパティ": "値"})

このように、複数のプロパティを変更する場合には、ハッシュ形式を採用します。

実際の実装例を見ながらその使い方を確認していきましょう。

実装コード

<p id="test-text2">テストテキスト</p>

<button onClick="changeStyle2()">styleを変更</button>

<script>
function changeStyle2() {
  $("#test-text2").css({ "color": "red", "font-weight": "bold"})
}
</script>

動作確認用

テストテキスト

上記の例では、ボタンをクリックすると、上部のpタグの文字色が「黒→赤」へ、また文字の太さがboldに変更されるよう実装しています。

プロパティを一つだけ変更するのと比べて、少しだけ書き方を変更する必要がありますので、この点はくれぐれもご注意くださいね。

jQueryでcssを変更する方法その2 class属性を変更する

続いてご紹介するのは、「class属性を変更する」方法です。

HTML要素のclass属性を変更するには、addClass()メソッドやremoveClass()メソッド、toggleClass()メソッドを使用します。

それぞれの使い方についてはこちらの記事(jQueryでclassを追加する方法【addClass()とtoggleClass()】jQueryでclassを削除する方法【removeClass()とtoggleClass()】)にて詳しく解説していますので、今回はその基本的な使い方だけご紹介させて頂こうと思います。

addClass()メソッドの基本的な使い方

$(セレクタ).addClass(class名)

removeClass()メソッドの基本的な使い方

$(セレクタ).removeClass(class名)

toggleClass()メソッドの基本的な使い方

$(セレクタ).toggleClass(class名)

いずれのメソッドも、追加/削除したいclassを引数に指定するだけで大丈夫ですので、直感的に使用できるかと思います。

なお、追加or削除するだけであればaddClass()メソッドやremoveClass()メソッドを使用し、追加したり削除したりする場合にはtoggleClass()メソッドを使用するようにしてくださいね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryを使ってcssを変更する方法について解説してきましたがいかがでしたか?

実際の開発でも頻繁に登場する技術ですので、ぜひこの機会に覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。