• HOME > 
  • Javascript > 
  • jQueryでCSSを操作する方法【css()とaddCla...

jQueryでCSSを操作する方法【css()とaddClass()メソッドの使い方】

投稿日:

jQueryでCSSを操作するには?

jQueryでCSSのプロパティとその値を操作することができれば、ユーザーがサイト上で行ったアクションに応じてスタイルを切り替えることが可能になります。

jQueryでCSSを操作する方法は主に以下の2パターンです。

  • css()メソッドを使って要素のCSSのプロパティとその値を直接操作する
  • addClass()removeClass()メソッド要素にクラス名を追加・削除することでスタイルを操作する

このページでは、cssメソッドとassClass(removeClass)メソッドの使い方をそれぞれ説明していきます。

リンク先のサムネイル
jQueryで表示と非表示を操作する方法

jQueryを使えばユーザーのアクションに応じて要素を表示させたり、非表示にしたりできます。...【もっと読む】

css()メソッドを使う方法

css()メソッドを使うと要素のCSSのプロパティとその値を直接操作することができます。

プロパティを新たに追加したり、スタイルシートなどで指定している値を変更したり、削除することが可能です。

プロパティを追加・変更する

要素に新しくプロパティを追加したり、既に指定している値を変更したい時は以下のように記述します。

プロパティを変更する書き方

複数のプロパティを追加・変更する場合

ふたつ以上の複数のプロパティの値をまとめて操作する場合は、「,」(カンマ)で区切って記述していきます。

複数のプロパティを変更する書き方

次の例ではボタンをクリックすると要素の背景色と文字色が変更するようにしてあります。

HTML

<div class="test_area">
    <button>変更する</button>
    <div class="test">ダミーテキストダミーテキストダミーテキスト</div>
</div>

jQuery

$(function(){
    $(".test_area button").on("click",function(){
        $(".test").css({
            "background":"#d40000",
            "color":"#fff",
        });
    });
});

プレビュー

リンク先のサムネイル
jQueryでクリックイベントを作成する方法

jQueryを使って「ボタンがクリックされたら」というプログラムを作ることで、サイトを訪れたユーザーのアクションに応じて表示を切り替えることが出来るようになります...【もっと読む】

プロパティを削除する

上記と同じ記述方法で、プロパティの値を空にすれば、プロパティを削除することができます。

プロパティを削除する書き方

複数のプロパティを削除する場合

ふたつ以上の複数のプロパティを削除する場合は、「,」(カンマ)で区切って記述していきます。

複数のプロパティを削除する書き方

次の例ではボタンをクリックすると要素の変更したプロパティが削除され、クラスに指定してある文字色と背景色へと切り替わります。

HTML

<div class="test_area">
    <button id="change">変更する</button><button id="delete">削除する</button>
    <div id="sample" class="test">ダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

.test{
    background:#d40000;
    color:#fff;
    width:100%;
    padding:10px;
    font-weight: bold;
}

jQuery

$(function(){
    $("#change").on("click",function(){
        $("#sample").css({
            'background':'#dd4000',
            'color':'#000dd4',
        });
    });
    $("#delete").on("click",function(){
        $("#sample").css({
            'background':'',
            'color':'',
        });
    });
});

プレビュー

addClass()メソッドとremoveClass()メソッドを使う方法

addClass()は要素にクラスを追加するメソッド、removeClassは要素からクラスを削除するメソッドです。

要素のプロパティを直接操作するのではなく、あらかじめスタイルを指定したクラスを用意し、対象の要素にクラス名を追加したり、削除することでスタイルの操作を行います。

操作したいプロパティが多い場合などはクラスを操作した方が簡潔にスタイルを変更できます。

クラスを追加する

要素にクラスを追加するには、「addClass()」メソッドを使用します。

下記のように追加したいクラス名を記入すると、セレクターで指定した要素にクラスが追加されます。

addClassメソッドの書き方

次の例ではボタンをクリックすると「active」というクラスが追加され、「#test.active」をセレクターにしているスタイルが適用されます。

HTML

<div class="test_area">
    <button>変更する</button>
    <div id="test">ダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

#test{
    width:200px;
    background:#999;
    padding:10px;
}
#test.active{/*ボタンクリック時*/
    width:100%;
    background:#d40000;
    color:#fff;
    transition:linear .5s;
}

jQuery

$(function(){
    $(".test_area button").on("click",function(){
        $("#test").addClass("active");
    });
});

プレビュー

クラスを削除する

要素が持つクラスを削除するには、「removeClass()」メソッドを使用します。

下記のように要素から削除したいクラス名を記入して使います。

removeClassメソッドの書き方

次の例ではボタンをクリックすると「active」というクラスが削除され、「#test.active」ではなく「#test」のスタイルが適用されます。

HTML

<div class="test_area">
    <button>変更する</button>
    <div id="test" class="active">ダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

#test{
    width:200px;
    background:#999;
    padding:10px;
    transition:linear .5s;
}
#test.active{
    width:100%;
    background:#d40000;
    color:#fff;
    transition:linear .5s;
}

jQuery

$(function(){
    $(".test_area button").on("click",function(){
        $("#test").removeClass("active");
    });
});

プレビュー

toggleClass()メソッドの使い方

toggleClassは、ユーザーのアクションに応じてaddClassとremoveClassの処理を交互に行ってくれるメソッドです。

ボタンのクリックで表示非表示を切り替えるようにしたい時などに役立ちます。

toggleClassメソッドの書き方

次の例ではボタンをクリックするたびに「active」というクラスの追加と削除が交互に実行されます。

HTML

<div class="test_area">
    <button>変更する</button>
    <div id="test">ダミーテキストダミーテキストダミーテキスト</div>
</div>

CSS

#test{
    width:200px;
    background:#999;
    padding:10px;
    transition:linear .5s;
}
#test.active{
    width:100%;
    background:#d40000;
    color:#fff;
    transition:linear .5s;
}

jQuery

$(function(){
    $(".test_area button").on("click",function(){
        $("#test").toggleClass("active");
    });
});

プレビュー

まとめ

今回はbackgroundプロパティの値を変更して背景色の変更を行いましたが、backgroundプロパティに限らずCSSのプロパティは上記の方法で変更することが可能です。

CSSの変更はjQueryを活用する際の基本となります。応用すればサイトに動きや機能を持たせることが可能なので是非マスターしましょう。

関連する記事

サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。
サムネイル

jQueryのclosest()で最も近い親要素を取得する方……

2023年05月01日
最終更新日:2023年04月17日
jQueryのclosest()は、要素から最も近い親要素を取得(指定)できるメソッドです。要素の親要素を辿っていき、該当するセレクターを持つものを見つけ出してくれます。
サムネイル

jQueryのprop()メソッドで属性値を取得・設定する方……

2023年04月04日
prop()は要素の属性値を取得したり、追加・変更することができるメソッドです。attrメソッドとの違いには「返り値が異なる」といった点があります。
サムネイル

jQueryでラジオボタンの値を取得や操作する方法【チェック……

2023年04月04日
jQueryを使えばHTMLのラジオボタンでユーザーが選択した(チェックされた)値を取得・操作することができます。propメソッドを使用して行います。
サムネイル

jQueryでaタグのhref(リンク先)を書き換える方法【……

2023年04月04日
最終更新日:2023年05月31日
aタグのhref(リンク先のURL)を書き換えたい場合は、attrメソッドを使用します。リンク先のURLの一部だけを書き換えたい時は、replaceメソッドで文字の置き換えを実行してからattrメソッドで書き換えるという方法になります。