プロパティの値を設定

広告

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

css(String name, String or Number value)

引数:
  name  プロパティ名
  value  値
戻り値:
  jQueryオブジェクト

1番目の引数に指定したプロパティの値として2番目の引数に指定した値を設定します。jQueryオブジェクトに複数の要素が含まれている場合は全ての要素に対して値を設定します。

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

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

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

$("#main").css("border", "1px solid #ff0000");

この書式の場合は1つのプロパティに対する値しか設定できません。複数のプロパティの値を一度に設定するには次のページの書式を使用して下さい。

サンプル

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

sample2_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/script2_1.js">
</script>

</head>
<body>

<button id="solidBtn">solid</button>
<button id="dottedBtn">dotted</button>

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

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

</body>
</html>

script2_1.js 

$(function() {
  $("#solidBtn").click(function() {
    $("p").css("border", "3px solid #ff0000"); 
  });

  $("#dottedBtn").click(function() {
    $("p").css("border", "3px dotted #ff0000"); 
  });

});

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

p2-1

2つのp要素が表示されています。ではまず「solid」と書かれたボタンをクリックして下さい。p要素の枠線が表示されます。

p2-2

次に「dotted」と書かれたボタンをクリックして下さい。p要素の枠線が点線で表示されます。

p2-3

( Written by Tatsuo Ikura )