2021-02-22

jQuery: css()メソッドで複数のプロパティを変更する

jQueryのcss()メソッドで、まとめて複数のプロパティを変更する方法を説明します。

まず、１つのプロパティを変更する場合は次のように記述します。

$('#hoge').css('color', 'red');

次に複数です。複数の場合は次のように記述します。

$('#hoge').css({'color': 'red', 'font-weight': 'bold'});

２つ程度ですと1行でもわかりますが、もっと増えると見にくくなると思います。 その場合は次のように複数行で記述してあげると見やすくなります。

$('#hoge').css({'color': 'red', 
                'font-weight': 'bold'});

ここで、css()メソッドの引数の部分を見ていると何か気づきませんか？

{'color': 'red', 
 'font-weight': 'bold'}

これはJavaScriptのオブジェクトと同じ形式です。

ですから、次のようにも記述できます。

var prop  = {'color': 'red',
            'font-weight': 'bold'};

$('#hoge').css(prop);

このようにCSS設定部分とcss()メソッドを別々に記述することもできます。 自分の好きな方法で記述してください。