jQueryのcss()でスタイルの取得・追加・変更まとめ!

こんにちは、ライターのマサトです!

今回は、jQueryからCSSのスタイルを操作することができる「css()」メソッドについて学習を進めていきましょう!この記事では、

  • 「css()」とは?
  • CSSを追加する
  • CSSを取得する
  • CSSを変更する
  • 相対値について
  • 複数のCSSを設定・変更する
  • 「css()」の引数に関数を使う
  • 「css()」の応用例

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、jQueryの「css()」をしっかり学習して自分のスキルアップを目指しましょう!

「css()」とは?

それでは、まず最初に「css()」メソッドについての基本的な知識から学習していきましょう。「css()」は、jQueryからスタイルシートを設定・追加・取得・変更などが出来る便利なメソッドになります。

例えばですが、次のようなリスト要素があったとします。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

このリストの文字色を「赤色」にしたい場合、通常ならHTMLにスタイルを記述するか別途CSSファイルを用意しますよね?

しかし、「css()」メソッドを利用することでjQueryから直接スタイルを設定したり変更することができるわけです。これを利用することで、プログラムの途中でスタイルを変更できるのでダイナミックなWebページを作成できます。

本記事では、「css()」メソッドについて基本的な使い方から応用例まで詳しく解説していきますのでぜひ参考にしてみてください!

CSSを追加する

ここからは、実際に「css()」メソッドを使ってプログラミングする方法を学んでいきましょう!まずは、対象の要素にスタイルを追加する方法です。記述方法としては、「対象要素.css( プロパティ, 値 )」のように引数へ通常のスタイル指定をすれば実現できます。

次のサンプル例を見てください!

<body>
<p>サンプルテキスト</p>

<script>
</script>
    $('p').css('color', '#f00');
</body>

この例では、単純なp要素が配置されています。このp要素の文字色を赤色にするには、スタイルシートで「color」プロパティの「#f00(赤)」を指定すれば良いですね。

そのため、p要素に対して「css('color', '#f00')」と記述すれば良いわけです。とてもシンプルな記述方法で簡単にスタイルを調整できるのが「css()」メソッドの魅力です!

CSSを変更する

次に、あらかじめ設定されているCSSを変更する方法です。これは簡単で、実は「css()」を使ってスタイルを設定すると元の設定に上書きされるという特性があります。

つまり、CSSを変更したければ同じプロパティを指定すれば、その設定に変更されるというわけです。次のサンプル例を見てください!

<body>
<p style="color: #00f">サンプルテキスト</p>

<script>
</script>
    $('p').css('color', '#f00');
</body>

この例では、事前にp要素の文字色が「青色」に設定されていますね。そこで、先ほどのサンプル例と同じく「css()」を使って文字色を「赤色」に設定します。これで、画面に表示される文字色は赤色になり、CSSが変更されたというわけです。

CSSを取得する

今度は、要素に設定されているCSSを取得してみましょう。記述方法としては、「対象要素.css( 取得したいプロパティ )」のように引数へCSSのプロパティを指定すればOKです。

次のサンプル例を見てください!

<body>
<div style="border:1px solid #f00">サンプルテキスト</div>

<script>
</script>
    var result = $('div').css('border');

    console.log( result );
</body>

実行結果

1px solid rgb(255, 0, 0)

この例では、あらかじめdiv要素にCSSの「border」プロパティが設定されていますね。そこで、div要素に対して「css('border')」と記述することでborderプロパティの値を取得することが出来るのです。

実行結果を見ると見事に値が取得できていますが、カラー情報は「rgb()」形式になる点にだけ注意しておきましょう!

相対値について

「css()」メソッドの便利な特徴の1つとして、相対値でプロパティの値を設定することができます。通常であれば、プロパティの値は「10px」とか「100%」など数値をそのまま指定しますよね?

ところが相対値を使うことで、「+10」や「-30」など増減値を指定することで値を設定できるというわけです。次のサンプル例を見てください!

<body>
<p style="font-size: 16px">サンプルテキスト</p>

<script>
    $('p').css('font-size', '+=10');

    var result = $('p').css('font-size');

    console.log( result );
</script>
</body>

実行結果

26px

この例では、p要素に「font-size」が「16px」で設定されていますね。そこで、「css('font-size', '+=10')」のように値を「+=10」と記述することでサイズを「26px」に設定することができます。

実際に、「css()」で変更後のfont-sizeを出力すると「26px」になっているのが実行結果からも分かりますね!

複数のCSSを設定・取得する

これまでは、「css()」を使って1つだけのスタイルを設定・取得してきました。

しかし、「css()」の引数には複数のCSSを一度に設定・取得することもできるのでご紹介しておきます。まず、複数のCSSを設定する場合は{ }内に必要な「プロパティ」と「値」を指定します。次のサンプル例を見てください!

<body>
<p>サンプルテキスト</p>

<script>
    $('p').css({
        'color':'#f00',
        'font-size':'28px',
        'font-weight':'bold'
    });
</script>
</body>

この例では、「css()」を使ってテキストの色・サイズ・太さを一度に設定しています。{ }内に「'color':'#f00'」という形式でスタイルを指定し、あとは「カンマ区切り」で複数繋げていきます。また、複数のCSSを取得したい場合はプロパティを配列で指定すれば可能です。

<body>
<p style="width:200px;padding:40px;color:#f00;">
    サンプルテキスト
</p>

<script>
    var result = $('p').css(['width', 'padding', 'color']);

    console.log( result );
</script>
</body>

実行結果

{width: "200px", padding: "40px", color: "rgb(255, 0, 0)"}

この例では、「css()」の引数に指定した配列に注目してください。「css(['width', 'padding', 'color'])」のように、取得したいプロパティを配列で指定するだけでOKです。

実行結果を見ると、それぞれのプロパティの値が取得できているのが確認できますね。

「css()」の引数に関数を使う

「css()」の引数には実は関数を使うことも可能です。関数を利用すれば、CSSプロパティの値を意図的に編集して設定することができるのでより細かい調整が可能になります。

記述方法としては、「対象要素.css( プロパティ, function() { } )」のように第2引数へ関数を指定することができます。例えば、すべてのp要素に設定されているテキストのサイズを少し大きくしてみましょう!

<body>
<p style="font-size:12px">サンプルテキスト1</p>
<p style="font-size:16px">サンプルテキスト2</p>
<p style="font-size:20px">サンプルテキスト2</p>

<script>
    $('p').css('font-size', function(index, value) {
        var newValue = parseInt(value) + 6;
    
        return newValue + 'px';
    })
</script>
</body>

実行後のHTML

<p style="font-size:18px">サンプルテキスト1</p>
<p style="font-size:22px">サンプルテキスト2</p>
<p style="font-size:26px">サンプルテキスト2</p>

この例では、「font-size」が設定された3つのp要素が配置されています。このp要素の「font-size」に対して関数を指定することで、それぞれの値を処理することが出来るわけです。関数の引数としてindexvalueが取得できます。

  • index
  • 要素のインデックス番号。3つのp要素があるので0〜2までの数値が入ります

  • value
  • プロパティの値。今回の例だと「font-size」の値が入ります

「value」にプロパティの値が格納されているので、「parseInt(value) + 6」のように記述してサイズを大きくしています。最後に、「return」を使って設定したい値を返すようにすれば、それぞれの値に設定されるわけです。

「css()」の応用例

「css()」メソッドを使った簡単な事例も紹介しておきます!HTML要素の「表示・非表示」をしたり、CSSを優先的に適用する「!important」の追加などを見ていきましょう。

これらの事例を活用することで、さらに「css()」メソッドの理解が深まるはずなのでぜひ参考にしてみてください。

「display」による表示・非表示

「css()」メソッドによるスタイルの設定・取得を活用することで「display」による要素の「表示・非表示」を実現できます。考え方としては、対象要素の「display」がどんな状態にあるかを取得し、それに合わせて「表示・非表示」の値を設定する流れです。

次のサンプル例を見てください!

<body>
<p>サンプルテキスト</p>
<button>ボタン</button>

<script>
    $('button').click(function() {
        var p = $('p');
        var state = p.css('display');
    
        if(state === 'block') {
            p.css('display', 'none');
        }
        else {
            p.css('display', 'block');
        }
    })
</script>
</body>

この例では、単純なp要素とボタンが配置されています。ボタンのクリックイベント処理を記述することで、ボタンをクリックするたびにp要素が「表示・非表示」を繰り返します。

まずは「p.css('display')」と記述することで現在の「display」の値を取得します。その値を条件式としてIF文を構成します。判断処理としては以下のとおり!

  • 値が「none」の場合
  • 要素が非表示なので「block」を設定して表示させる

  • 値が「block」の場合
  • 要素が表示されているので「none」を設定して非表示にする

これにより、ボタンのクリック動作に合わせて対象の要素を「表示・非表示」できるわけです!

「!important」を追加する

CSSのプロパティを最優先で適用したい時に「!important」を使うケースがあります。これまで学んだように「css()」を使うと次のようになるでしょう。

<body>
<p style="color:#f00;font-size:28px">サンプルテキスト</p>

<script>
    $('p').css('color', '#0f0 !important');
</script>
</body>

実行後のHTML

<p style="color:#f00;font-size:28px">サンプルテキスト</p>

「css()」の引数に「'color', '#0f0 !important'」のように記述すれば適用できそうですよね。

しかし、実行後のHTMLを見て分かるようにまったく適用されていません!実は、「css()」だと「!important」を認識しないので、cssTextでスタイルを指定する必要があるのです。

次のサンプル例を見てください!

<body>
<p style="color:#f00;font-size:28px">サンプルテキスト</p>

<script>
    var style = $('p').attr('style');

    $('p').css('cssText', 'color:#0f0 !important;' + style);
</script>
</body>

実行後のHTML

<p style="color: rgb(0, 255, 0) !important;font-size: 28px; ">サンプルテキスト</p>

「css()」メソッドの引数に注目してください。第1引数に「cssText」を設定し、第2引数へスタイルを指定しています。注意ポイントは「cssText」は元のスタイルを上書きしてしまうという点です。

そのため、事前に「attr('style')」を記述して元のスタイルを変数に格納して「css()」の引数に再設定しましょう!このようにすれば、実行後のHTMLのように正しくスタイルを設定することができます。

まとめ

今回は、jQueryからCSSを追加・変更・取得することができる「css()」について学習をしました!最後に、今回のポイントをおさらいしておきましょう!

  • 「css()」を使うと対象要素のスタイルを追加・変更・取得することができる
  • 「css()」は複数のCSSを設定・取得することもできる
  • 「css()」は引数に関数を指定して複雑な条件分岐を行って値を設定することも可能

上記内容を踏まえて、ぜひ自分のプログラムにも活用できるように頑張っていきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説