jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素の属性を操作するには?(attr/removeAttr)

2014年12月11日

任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。

  • このエントリーをはてなブックマークに追加

 要素の属性を設定するには、attrメソッドを利用します。例えば、以下はid="logo"である要素に対して、src属性を設定するコードです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#logo').attr('src', 'http://www.wings.msn.to/image/wings.jpg');
});
</script>
</body>
</html>
attrメソッドで要素の属性を設定するコード(attr.html)
<img>要素に指定された画像を反映
<img>要素に指定された画像を反映

 attrメソッドでは、styleclass属性を指定することも可能ですが、これらの属性については専用で用意されているcssaddClassなどのメソッドを利用することをお勧めします。

複数の属性をまとめて設定する

 { 属性名: 値... }形式のハッシュを渡すことで、複数の属性をまとめて設定することもできます。

JavaScript
$('#logo').attr({
  'src': 'http://www.wings.msn.to/image/wings.jpg',
  'title': 'WINGSプロジェクト'
});
ハッシュで複数の属性を設定するコード(attr.html)
画像のURLとタイトルを設定
画像のURLとタイトルを設定

属性の現在値を取得する

 attrメソッドでは、属性を設定するだけではありません。以下のように属性名を文字列で指定することで、現在値を取得することもできます。

JavaScript
console.log($('#logo').attr('title'));  // 結果:WINGSプロジェクト
属性の現在値を取得するコード(attr.html)

 $()関数が複数の要素にマッチした場合にも、attrメソッドが取得するのは「最初の要素についてだけ」である点に注意してください。

属性を削除する

 既存の属性を削除するならば、removeAttrメソッドを利用します。removeAttrメソッドでは、削除する属性が単一であれば文字列で、複数であれば空白区切りの文字列で指定します。

JavaScript
// title属性を削除
$('#logo').removeAttr('title');

// src/title属性を削除
$('#logo').removeAttr('src title');
既存の属性を削除するためのコード(attr.html)

 引数に空白区切りの文字列を指定できるのは、jQuery 1.7以降です。

処理対象:要素属性の取得/設定 カテゴリ:属性|要素
API:.attr() カテゴリ:CSS|Attributes(属性)|Manipulation(要素の操作) > General Attributes(一般属性)
API:.removeAttr() カテゴリ:CSS|Attributes(属性)|Manipulation(要素の操作) > General Attributes(一般属性)

※以下では、本稿の前後を合わせて5回分(第5回~第9回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

5. 要素のスタイルプロパティを変更するには?(css)

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

6. 要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)

要素にclass属性の値を設定/削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。

7. 【現在、表示中】≫ 要素の属性を操作するには?(attr/removeAttr)

任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。

8. 要素のプロパティを取得/設定するには?(prop)

任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。

9. 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)

任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社