複数のプロパティの値をまとめて設定

jQueryオブジェクトとして取得された要素の集合に対し、複数のプロパティに対して値をまとめて設定するする方法を確認します。次の書式を使います。

css(Map properties)

引数:
  properties  プロパティ名と値のセットにした集合
戻り値:
  jQueryオブジェクト

プロパティ名と値をセットにして、設定したいセットをまとめて記述したものを引数に指定します。記述方法は次のとおりです。

{
  "プロパティ名1":"値1",
  "プロパティ名2":"値2",
  "プロパティ名3":"値3"
}

「プロパティ名」＋「:」＋「値」で1つのプロパティに対して値を指定します。複数設定する場合はカンマ(,)で区切って記述します。そして全体を「{」と「}」で囲んで下さい。

プロパティ名にハイフンが含まれる場合は上記のようにプロパティ名をダブルクオーテーションで囲って指定する必要がありますが、プロパティ名にハイフンが含まれる場合でもキャメルケースを使って記述した場合はダブルクオーテーション無しで指定できます。(キャメルケースでの記述とは、例えば「background-color」というプロパティ名であった場合に「backgroundColor」のように記述する方法です)。

{
  プロパティ名1:"値1",
  プロパティ名2:"値2",
  プロパティ名3:"値3"
}

どちらの記述方法を使ってもいいのですが、スタイルシートで使っているプロパティ名と同じ名前を使いたい場合はダブルクオーテーションで囲うようにして下さい。

なおjQueryオブジェクトに複数の要素が含まれている場合は全ての要素に対して値を設定します。

例えば次のようにHTML文が記述されている場合で考えて見ます。

<div id="main">
  ...
</div>

このdiv要素に対して複数のプロパティの値を設定するには次のように記述します。

var prop = {
  margin:"10px",
  padding:"5px",
  border:"1px solid #ff0000"
}

$("#main").css(prop);

上記の例では3つのプロパティ名にはハイフン(-)が含まれていませんので、プロパティ名はダブルクオーテーションで囲んでも囲まなくてもどちらでもいいです。

サンプル

では簡単なサンプルを作成して試して見ます。

sample3_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQueryテスト</title>

<script type="text/javascript" src="../file/jquery.js">
</script>
<script type="text/javascript" src="./js/script3_1.js">
</script>

</head>
<body>

<button id="redBtn">RED</button>
<button id="blueBtn">BLUE</button>

<p>
紅葉の季節になりました。
</p>

<p>
週末はきっと多くの人が紅葉狩りに出かけることでしょう。
</p>

</body>
</html>

script3_1.js

$(function() {
  $("#redBtn").click(function() {
    var prop = {
      "background-color":"#ff0000",
      "color":"#ffffff",
      "border":"2px solid #800000"
    }

    $("p").css(prop);
  });

  $("#blueBtn").click(function() {
    var prop = {
      backgroundColor:"#0000ff",
      color:"#ffffff",
      border:"2px solid #000080"
    }

    $("p").css(prop);
  });
});

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

2つのp要素が表示されています。ではまず「RED」と書かれたボタンをクリックして下さい。p要素の複数のプロパティに対して値が設定されます。

p3-2

次に「BLUE」と書かれたボタンをクリックして下さい。先ほどと同じくp要素の複数のプロパティに対して値が設定されます。

p3-3

今回はキャメルケースを使った記述方法と使わない方法をそれぞれ使用しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。