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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

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を活用する際の基本となります。応用すればサイトに動きや機能を持たせることが可能なので是非マスターしましょう。

広告
広告

関連する記事

サムネイル

JSでセレクト値が変更されたらフォームを送信を実行する方法【……

2024年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。
サムネイル

JSでチェックボックスの全選択全解除を行う方法【すべて選択】

2024年07月02日
フォームのチェックボックスの数が多いときにあると便利な、ワンクリックで全選択や全解除できる機能をJavaScriptで作る機会があったので、その方法を備忘録として残します。
サムネイル

JSで配列の重複チェックを行う【Setオブジェクトを利用】

2024年07月02日
JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。
サムネイル

JSのkeyup・keydown・keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JSでテキストボックスに入力された値を即時取得する【this……

2024年06月13日
ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。