jQueryで複数のCSSプロパティを変更する方法（サンプルコード有）

jQueryのメソッド『css()』を使用して要素のCSSを書き変えるときの指定方法をご紹介します。

css()メソッドで複数のプロパティを変更するサンプルコード

 title="変更するプロパティが複数の場合"]
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
// DOM要素が読み込まれたあとに実行
$(function(){
   $(要素).css({
      'プロパティ':'値',
      'プロパティ':'値'
   });
});
</script>

※Wordpressを利用されている場合、「$」を「jQuery」に書き換えないと動作しない場合があります。

動かない場合、「,」の数や「文字列の区切り」などをもう一度確認してみてください。

「click」に対応して変更するケースなどは下でも紹介しています。

css()メソッドのおさらい

css()メソッドを使うと、指定したjQueryオブジェクトの要素のCSSを書き換えられます。

変更するCSSのプロパティが１つの場合

jQueryで指定した要素のcssを変更する場合は、基本的に「css()」を利用して記述します。一応「attr()」メソッドでも変更は可能ですが、「css()」メソッドの方が記述が簡単なので今回はこちらを紹介します。

 title="変更するプロパティが一つの場合"]
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
// DOM要素が読み込まれたあとに実行
$(function(){
   $(要素).css('プロパティ','値');
});
</script>

変更するCSSのプロパティが２つの場合

 title="変更するプロパティが一つの場合"]
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
// DOM要素が読み込まれたあとに実行
$(function(){
   // プロパティ、値を変えた指示を２度記述する
   $(要素).css('プロパティ','値');
   $(要素).css('プロパティ','値');
   // または
   $(要素).css({
      'プロパティ':'値',
      'プロパティ':'値'
   });
});
</script>

css()メソッドの実例

jQueryオブジェクトのCSSを書き変える、カンタンなコードをいくつか紹介します。
ご自由にコピペなどでお使いください。

テキストカラーを赤に変更

テキストカラーを赤色に書き換えるコードです。

<script>
$(function(){
   $('.text1').css('color','red');
});
</script>　
<p class="text1">文字色が赤くなります。</p>

文字色が赤くなります。

クリックすると文字色を赤く変更

See the Pen [jQuery]クリックすると文字の色が赤になるボタン by nkmrkisk (@rekid) on CodePen.

複数プロパティの値を同時に変更

「css()」にて複数のプロパティを変更する場合は、「プロパティ:値 , プロパティ:値」というように配列を使ってプロパティと値を渡してあげます。

$(要素).css({
      'プロパティ':'値',
      'プロパティ':'値'
      })

<script>
$(function(){
   $('.text2').css({'color':'blue','fontSize':'20px'});
});
</script>
　
<p class="text2">文字色が青く大きくなります。</p>

文字色が青く大きくなります。

See the Pen [jQuery].css()で複数のcssプロパティ変更 by nkmrkisk (@rekid) on CodePen.

連想配列を変数に保持する

連想配列を変数に代入して、複数の記述まとめておくと、あとで変更になったときに便利です。

<script>
$(function(){
   var test3 = {'color':'#FFF','fontSize':'12px','background':'#EA6D6D','padding':'10px'};
   $('.text3').css(test3);
});
</script>
　
<p class="text3">文字色が白く小さく、そして背景が赤くなります。</p>

文字色が白く小さく、そして背景が赤くなります。

ベンダープレフィックス

<script>
$(function(){
   var str = 'matrix(0.8,-0.05,0.1,1.2,30,10)';
   var test4 = {'transform':str,
   '-moz-transform':str,
   '-webkit-transform':str,
   '-o-transform':str,
   '-ms-transform':str
   };
   $('.text4').css(test4);
});
</script>
　
<p class="text4">文字にcss3のtransformを適用させます</p>

文字にcss3のtransformを適用させます

まとめ

初歩の初歩だけど、よく忘れてググってるのでメモ。

連想配列での指定は、animate()などの動きをつけていくときに何かと便利です。