第2回 属性&コンテンツ編連載:jQuery逆引きリファレンス(12/19 ページ)

» 2009年11月13日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 複数のスタイル・プロパティをまとめて設定するには、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>

リスト039 新たな<div>要素を生成して、ページに追加(CssSets.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト039の実行結果

 ただし、スタイルの管理といった観点からは、あまり複雑なスタイルをcssメソッドで操作するべきではありません(スタイルを変更する場合にも修正を困難にする原因となります)。

 できるだけ.cssファイルでスタイル・クラスとして定義しておき、JavaScriptからはaddClass/removeClassメソッドを使って、クラス単位の追加/削除を行うようにしてください。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。