【jQuery】「css()」で複数のプロパティを同時に変更する方法

Pocket

jQueryのメソッド『css()』を使用してcssの書き換えを行うときの指定方法を、いくつか紹介します。

「css()」で複数のプロパティ変更のサンプル

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

※ちなみにwordpressを利用されているブログの場合は、「$」が干渉してしまってうまく動作しないので、「$」を「jQuery」に置き換えてください。

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

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

『css()』について

jQueryを使用してcssを書き換える時は「css()」メソッドを使う

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

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

1つのプロパティを「css()」で変更するおさらい

おさらいとしてcssのプロパティを1つ変更する場合の記述方法を紹介します。

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

文字色が赤くなります。

クリックすると「css()」によって文字色が赤くなるサンプル

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

「css()」で複数のプロパティの値変更を行う場合の記述

「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()などの動きをつけていくときに何かと便利です。

SNSでもご購読できます。