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

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

投稿日:

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

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

本記事は執筆時点(2020年12月28日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

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年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]