第2回 属性&コンテンツ編:連載:jQuery逆引きリファレンス(12/19 ページ)
要素セットに含まれる要素本体や属性、スタイルを取得/設定するためのメソッドについてまとめた、すぐに役立つ18本を一挙公開。
複数のスタイル・プロパティをまとめて設定するには、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を実際にブラウザで開く
ただし、スタイルの管理といった観点からは、あまり複雑なスタイルをcssメソッドで操作するべきではありません(スタイルを変更する場合にも修正を困難にする原因となります)。
できるだけ.cssファイルでスタイル・クラスとして定義しておき、JavaScriptからはaddClass/removeClassメソッドを使って、クラス単位の追加/削除を行うようにしてください。
Copyright© Digital Advantage Corp. All Rights Reserved.