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

今回の記事は、

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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を変更する方法について解説してきましたがいかがでしたか?

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

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

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