JavaScript

jQueryを使ってCSSコードを変更・追加・削除する方法を解説

Webページの動きが複雑になっていく中でも、シンプルな動きというのは必ず必要とされています。クリックしたら色が変わったり、文字サイズが大きくなるというCSSを単純に変更するという操作です。

CSSを変更する操作はjQueryを使えば簡単にできます。jQueryとはJavaScriptのライブラリの1つで、DOM操作を簡単に行うことができます。CSSを変更するにはjQueryのCSSメソッドを使えば簡単できます。

本記事ではjQueryを使ってCSSを変更、追加、削除する方法を解説します。基本的にはCSSメソッドを使いますが、使わないパターンも解説します。

jQueryでCSSメソッドを使用してCSSを変更・追加・削除する

CSSを変更する

jQueryでCSSを変更する方法はCSSメソッドを使います。基本構文は以下の通りです。

$(“セレクタ”).css(“プロパティ”,”値”);

例えば、非表示にされていたdivタグを表示させる場合で解説します。それぞれを要素に当てはめると以下の通りになります。

  • セレクタ:div
  • プロパティ:display
  • 値:block

よって、コードは

$(“div”).css(“display”,”block”);

となります。本コードのようにdisplayを表示させるコードはよく使われるので、コードごと覚えておいても損はないと思います。

CSSを追加する

CSSファイルやstyleタグ内に記述していないコードもCSSメソッドを使えば、CSSを追加することができます。基本コードは変更と同じです。onイベントと組み合わせることで、CSSを追加しているWebページはたくさんあります。

CSSを削除する

CSSメソッドを使えばCSSを削除することができます。その際には、消したいCSSの引数を空白で記述します。具体的な方法は以下の通りです。

HTMLファイルの<style>にcolor:red;というCSSがあったとします。このCSSを削除するには下のようなコードになります。

$(“div”).css(“color”,””)

「””」は空白を意味します。つまり、colorには値が入っていないので、CSSが無効になります。

CSSメソッドで2つ以上のCSSのプロパティを変更・追加する

CSSメソッドで2つ以上のプロパティを今までCSSメソッドでは1つのプロパティのみを変えていました。二つ以上のCSSを変更・追加したいこともあると思います。複数指定する際の基本構文は以下の通りです。

$(“div”).css({“プロパティ1” : “値1” , “プロパティ2” : “値2”});

CSSメソッドの()の中に{}を入れます。そして、プロパティと値の間には:(コロン)で区切ります。2つ目以降のプロパティを記述する際の区切りは,(コンマ)です。 

サンプルコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        display: none;
    }
</style>

<body>
    <div>
        <ul>
            <li><img src="画像のリング"></li>
            <li><img src="画像のリング"></li>
            <li> <img src="画像のリング"></li>
        </ul>
    </div>
    <button>表示</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $("button").on("click", function () {
            $("div").css("display", "block");
            $(this).css({ "background-color": "blue", "color": "red" })
        });
    </script>
</body>

</html>

jQueryでCSSメソッドを使わずにCSSを変更・追加・削除する方法

CSSを追加する

CSSを追加する方法として、あらかじめCSSを書いておいたclassを用意しておいて、CSSをつけたいタグにclassを後で追加があります。その際に使うのがaddClassメソッドです。基本構文は以下の通りです。

$(“セレクタ”).addClass(“クラス名”);

下にサンプルコードを用意しています。ボタンをクリックするとテキストの色と文字サイズが変わるようになっています。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .change-text {
        color: red;
        font-size: 32px;
    }
</style>

<body>
    <div>
        <p>ここが変わります。</p>
    </div>
    <button>変化</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $("button").on("click", function () {
            $("p").addClass("change-text");
        });
    </script>
</body>

</html>

classを削除する

削除をする場合は、追加するaddClassメソッドをremoveClassを使うだけです。無効にしたclass名を削除することで、CSSを削除します。基本構文は以下の通りです。削除したいCSSがあるセレクタに必ずclass名を付けなければいけませんが、コードが短くて済みます。

$(“セレクタ”).removeClass(“クラス名”);

CSSメソッドを使うメリット

CSSメソッドを使うメリットとしてはCSSのプロパティに対してコードを書き換えることができることです。addClassやremoveClassはCSSファイルにあらかじめ用意しておいたコードをHTMLのクラスを操作することで有効にします。

一方で、CSSメソッドを使えば、同じクラスの中の指定したプロパティにのみ操作をすることが可能です。CSSメソッドは引数のプロパティのみを変えますので、他のプロパティには影響を与えません。

例えば、background-colorは変えたいけれどcolorを変えたくないという場合にはcss(“background-color”,”skyblue”)のように記述すればcolorを変えることなく、background-colorを変えることができます。

まとめ

jQueryでCSSを変更・追加・削除する方法を解説しました。CSSをページ内で動かすことができれば、デザインの幅が広がり、より見やすいサイトとなります。見やすいサイトほど、ユーザーの滞在時間が長くなります。

特に多くの情報を載せすぎると複雑化しやすくなるため、CSSメソッドを使って必要な時に必要な情報を取り出せるようなサイトは印象も良いです。CSSを操作して、ユーザーの見やすいサイトを目指すことをおすすめします。