第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（12/19 ページ）
複数のスタイル・プロパティをまとめて設定するには、css(props)プロパティを利用すると便利です。css(props)メソッドでは、スタイル・プロパティを「プロパティ名： 値」のハッシュ形式（＝ディクショナリ形式）で指定できます*。
* プロパティ名はもともとのハイフン混じりの名前ではなく、JavaScript形式で指定する必要があります（「background-color」であれば「backgroundColor」）。
スタイル・プロパティを設定するメソッドとしては、css(name, value)メソッドもありますが、こちらは一度の呼び出しで1つのスタイル・プロパティしか設定できず、たくさんの属性をまとめて設定しようとすると、コードも冗長になりがちです。複数のプロパティを設定するには、できるだけcss(props)メソッドを利用するようにしてください。
以下は、新たな<div>要素を生成して、ページに追加する例です。<div>要素には、width（幅）、height（高さ）、border（枠線）、backgroundColor（背景色）を設定するものとします。
<script type="text/javascript">
$(function() {
// 新規作成した<div>要素にスタイルを適用し、<body>タグ配下に追加
$('<div></div>').css({
width : '80px',
height : '80px',
border : 'solid 5px #FF0000',
backgroundColor : 'Yellow'
}).appendTo('body');
});
</script>
このHTMLを実際にブラウザで開く
リスト039の実行結果ただし、スタイルの管理といった観点からは、あまり複雑なスタイルをcssメソッドで操作するべきではありません（スタイルを変更する場合にも修正を困難にする原因となります）。
できるだけ.cssファイルでスタイル・クラスとして定義しておき、JavaScriptからはaddClass／removeClassメソッドを使って、クラス単位の追加／削除を行うようにしてください。
Copyright© Digital Advantage Corp. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。