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

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



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

連載目次


 複数の属性をまとめて設定したい場合には、attr(props)メソッドを使うと便利です。attr(props)メソッドは、属性値を「属性名: 値」のハッシュ形式(=ディクショナリ形式)で指定できます。

 属性値を設定するメソッドとしては、attr(name, value)メソッドもありますが、こちらは一度の呼び出しで1つの属性しか設定できず、たくさんの属性をまとめて設定しようとすると、コードも冗長になりがちです。複数の属性を設定するには、できるだけattr(props)メソッドを利用するようにしてください。

 以下は、新たな<img>要素を生成して、それを<div id="logo">要素の配下に追加する例です。<img>要素には、src、width、height、alt属性を設定します。

<style type="text/css">

.logo { border: solid 1px Red; }

</style>

<script type="text/javascript">

$(function() {
  $('<img />').attr({
      src : 'http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1_logo.jpg',
      width : 81,
      height : 30,
      alt : 'ASP.NET MVC実践プログラミング',
      className : 'logo'
    }).appendTo('#logo');
});

</script>

……中略……


<div id="logo"></div>

リスト030 新たな<img>要素を作成&追加(AttrSets.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト030の実行結果

 Attr(props)メソッドでclass属性を指定する場合には、属性名は「class」ではなく「className」で指定しなければならない点に要注意です(「class」はInternet Explorerでは予約語と見なされてしまうためです)。代わりに、addClassメソッドを使っても構いません。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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