【jQuery】CSSメソッドで複数プロパティを指定する構文-WordPressラボ

Date：2017/05/28 | カテゴリー

※景品表示法に基づく表記：本記事には商品の広告が含まれています

ど忘れしがちな「.CSS();」の複数指定構文

超基本なんだけど、
忘れがちなコードを紹介。

CSSのセレクタと値を設定できるjQueryのCSSメソッド。

どこかをクリックしたら、ちょっとしたスタイルをあてたりする際などに、とても便利です。

ただ、このCSSメソッドにおいて、複数プロパティを指定する際の構文をど忘れすることがあります。

今回は、コピペOK!な形でCSSメソッドの複数指定コードを紹介します。

1つのプロパティを指定する場合の構文は以下のとおりです。

$('セレクタ').css('プロパティ','値');

1	$('セレクタ').css('プロパティ','値');

例えば、（DOM要素が読み込まれた後すぐに）textGreenというクラス名の<P>タグ内テキストを緑色にしたい場合、以下のような記述となります。

$(function(){
  $('p.textGreen').css('color','#008000');
});

$(function(){

$('p.textGreen').css('color','#008000');

});

複数のプロパティを使用したい場合は、下記のように連想配列（文字列をキーとして値を設定した配列）の形にて指定することが可能です。

$('セレクタ').css({'プロパティ':'値','プロパティ':'値','プロパティ':'値'});

1	$('セレクタ').css({'プロパティ':'値','プロパティ':'値','プロパティ':'値'});

この点、「.css(‘プロパティ’,’値’:’プロパティ’,’値’);」ではないことに注意が必要です。

例えば、（DOM要素が読み込まれた後すぐに）textGreenというクラス名の<P>タグ内テキストを、
緑色、下線付き、サイズを24pxとしたい場合、
以下のような記述となります。

$(function(){
  $('p.textGreen').css({'color':'#008000','font-size':'24px','text-decoration':'underline'});
});

$(function(){

$('p.textGreen').css({'color':'#008000','font-size':'24px','text-decoration':'underline'});

});

ど忘れしないように、頭に叩き込んでおきたいものです。

【jQueryの基本のキ】CSSメソッドで複数プロパティを指定するコード