【jQuery】attr()でHTML属性を取得・設定・削除する完全ガイド｜prop()との違いも解説

jQueryの attr() メソッドはHTML要素の属性を取得・設定・削除できます。src・href・data-* など様々な属性を操作できますが、checked・disabled などのプロパティとは使い方が異なります。本記事では attr() の全機能と prop() との使い分けを解説します。

1. 属性の取得

// 単一属性の取得
var src  = $('img').attr('src');
var href = $('a').attr('href');
var id   = $('.box').attr('id');

// data属性の取得
var val  = $('#item').attr('data-value');  // 文字列で返る

// 複数要素がある場合は最初の要素の属性を返す
var firstSrc = $('img').attr('src');  // 最初のimgのsrcのみ

2. 属性の設定

// 単一属性の設定
$('img').attr('src', '/images/new.jpg');
$('a').attr('href', 'https://example.com');
$('input').attr('placeholder', '入力してください');

// 複数属性を一括設定（オブジェクト形式）
$('a').attr({
  href: 'https://example.com',
  target: '_blank',
  rel: 'noopener noreferrer'
});

// 関数で設定（現在値を利用して変換）
$('img').attr('src', function (index, currentSrc) {
  return currentSrc.replace('small', 'large');  // ファイル名を置換
});

3. 属性の削除

// 属性の削除
$('a').removeAttr('target');       // target属性を削除
$('input').removeAttr('disabled'); // disabled属性を削除

// 複数属性を一括削除（スペース区切り）
$('a').removeAttr('target rel');

4. attr()とprop()の違い（重要）

HTMLの「属性（attribute）」と「プロパティ（property）」は別物です。checked・disabled・selected などは状態を表すプロパティなので prop() を使います。

// チェックボックスの状態取得
// × attr()だと常に初期値のHTML属性を返す
var wrong = $('input[type="checkbox"]').attr('checked'); // 'checked' or undefined

// ◯ prop()で現在の状態を取得
var isChecked = $('input[type="checkbox"]').prop('checked'); // true / false

// チェックボックスのON/OFF設定
$('input').prop('checked', true);    // チェックをON
$('input').prop('checked', false);   // チェックをOFF
$('input').prop('disabled', true);   // 無効化
$('select option:first').prop('selected', true); // 最初のオプションを選択

5. data-*属性の操作

カスタムdata属性は attr() でも操作できますが、jQueryの .data() メソッドを使うとより便利です。

// attr()でdata属性を読み書き
var val  = $('#el').attr('data-id');  // 'attr'-が常に文字列
$('#el').attr('data-id', 'new-value');

// .data()でdata属性を読み書き（型変換あり・DOMに反映されない）
var num  = $('#el').data('id');       // 数値なら自動変換: 42
$('#el').data('id', 99);             // DOMには反映されないがjQuery内部に保存

6. 実用パターン集

// 画像のsrcを動的に変更（ローディング後に切り替え）
$('.lazy-img').attr('src', function (i, old) {
  return $(this).attr('data-src');
});

// リンクのtargetを一括設定（外部リンクのみ新タブ）
$('a[href^="http"]').attr({ target: '_blank', rel: 'noopener noreferrer' });

// inputのplaceholderを多言語切り替え
$('#lang-btn').on('click', function () {
  $('input[name="search"]').attr('placeholder', '検索...');
});

// フォームのactionを動的に変更
$('select[name="country"]').on('change', function () {
  var country = $(this).val();
  $('form').attr('action', '/submit/' + country);
});

まとめ

jQueryの attr() はHTMLの属性値を取得・設定・削除する汎用メソッドです。src・href・data-* などの通常属性に使い、checked・disabled などの状態プロパティには prop() を使うのが正しい使い分けです。

関連記事: jQueryのdata属性の取得・設定・受け渡し完全ガイド / jQueryでname属性の値を取得・変更する方法

よくある質問（FAQ）