こんにちは、ライターのマサトです！
今回は、jQueryからCSSのスタイルを操作することができる「css()」メソッドについて学習を進めていきましょう！この記事では、
- 「css()」とは？
- CSSを追加する
- CSSを取得する
- CSSを変更する
- 相対値について
- 複数のCSSを設定・変更する
- 「css()」の引数に関数を使う
- 「css()」の応用例
などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、jQueryの「css()」をしっかり学習して自分のスキルアップを目指しましょう！
「css()」とは？
それでは、まず最初に「css()」メソッドについての基本的な知識から学習していきましょう。「css()」は、jQueryからスタイルシートを設定・追加・取得・変更などが出来る便利なメソッドになります。
例えばですが、次のようなリスト要素があったとします。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</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() { } )」のように第２引数へ関数を指定することができます。例えば、すべてのp要素に設定されているテキストのサイズを少し大きくしてみましょう！
<body>
<p style="font-size:12px">サンプルテキスト１</p>
<p style="font-size:16px">サンプルテキスト２</p>
<p style="font-size:20px">サンプルテキスト２</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">サンプルテキスト１</p> <p style="font-size:22px">サンプルテキスト２</p> <p style="font-size:26px">サンプルテキスト２</p>
この例では、「font-size」が設定された3つのp要素が配置されています。このp要素の「font-size」に対して関数を指定することで、それぞれの値を処理することが出来るわけです。関数の引数としてindexとvalueが取得できます。
- index
- value
要素のインデックス番号。3つのp要素があるので0〜2までの数値が入ります
プロパティの値。今回の例だと「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()」は引数に関数を指定して複雑な条件分岐を行って値を設定することも可能
上記内容を踏まえて、ぜひ自分のプログラムにも活用できるように頑張っていきましょう！
