今回の記事は、
- jQueryを使ってcssを変更したい
- 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない
という方に向けた記事になっています。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
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を変更する方法について解説してきましたがいかがでしたか?
実際の開発でも頻繁に登場する技術ですので、ぜひこの機会に覚えておいてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。