過去バージョン

この記事の要点

.attr() は jQuery で要素の HTML 属性を取得・設定するメソッド $(sel).attr("src") で取得、$(sel).attr("src", "...") で設定。オブジェクト渡しで複数属性を一括設定可能 属性削除は .removeAttr("...") checked / disabled / selected など動的に変化するプロパティは .attr() ではなく .prop() を使う（jQuery 1.6+） 値を関数で動的計算する .attr("...", function(i, v){}) パターンもサポート

.attr() とは

.attr() は jQuery で要素の HTML 属性（attribute）を取得・設定するメソッドです。src / href / id / data-* / alt など、HTML タグに直接書かれている属性を扱います。

属性の取得

// 
const src = $("#logo").attr("src");
console.log(src);  // logo.png

const alt = $("#logo").attr("alt");
console.log(alt);  // Logo

該当する要素が複数ある場合は最初の要素の属性値を返します。属性が存在しない場合は undefined。

属性の設定

単一属性

$("#logo").attr("src", "new-logo.png");
$("a").attr("target", "_blank");

複数属性をオブジェクトで一括設定

$("img").attr({
    src: "photo.jpg",
    alt: "プロフィール写真",
    width: 200,
    height: 200
});

関数で動的に決定

// インデックスと現在値を引数に取り、新しい値を返す
$("a").attr("href", function (index, currentHref) {
    return currentHref + "?ref=campaign";
});

属性の削除

$("input").removeAttr("disabled");
$("a").removeAttr("target");

.attr() と .prop() の使い分け

jQuery 1.6 以降では属性（attribute）とプロパティ（property）を明確に区別します。

種類	説明	例
attribute	HTML タグに記述された初期値	src, href, id, alt, class, data-*
property	DOM 上で動的に変化する状態	checked, disabled, selected, value

典型的な例：チェックボックス

// 

// NG: .attr() は初期値（HTML 上の値）を返す
$("#cb").attr("checked");   // "checked" （文字列）

// OK: .prop() は現在の状態を返す
$("#cb").prop("checked");   // true / false

// チェックを ON にする
$("#cb").prop("checked", true);

// チェックを OFF にする
$("#cb").prop("checked", false);

判別の目安

使うメソッド	対象
.attr()	HTML 属性そのもの。src / href / data-* / alt
.prop()	真偽値で表現される動的状態。checked / disabled / selected / readOnly

data-* 属性

data-* 属性は .attr() でも取得できますが、jQuery 専用の .data() はキャッシュと型変換（数値や JSON）を行うため、ケースに応じて使い分けます。

// 


$("#x").attr("data-user-id");  // "42" （文字列）
$("#x").data("userId");        // 42   （数値に自動変換、ケバブ → キャメル）
$("#x").data("config");        // {a: 1} （JSON 自動パース）

よく使う属性操作のパターン

画像の遅延読み込み

$("img.lazy").each(function () {
    const realSrc = $(this).attr("data-src");
    $(this).attr("src", realSrc);
});

外部リンクに target="_blank"

$("a[href^=http]").attr({
    target: "_blank",
    rel: "noopener noreferrer"
});

フォームの一括無効化

// 注: disabled は .prop() を推奨
$("form :input").prop("disabled", true);

純粋な DOM API との対応

jQuery	DOM API
$(el).attr("src")	el.getAttribute("src")
$(el).attr("src", v)	el.setAttribute("src", v)
$(el).removeAttr("src")	el.removeAttribute("src")
$(el).prop("checked")	el.checked

属性の存在チェック

属性が存在しない場合 .attr() は undefined を返します。これを利用して存在判定できます。

if (typeof $("#x").attr("data-foo") !== "undefined") {
    // 属性が存在する
}

// または .is("[属性名]") の方がスッキリ
if ($("#x").is("[data-foo]")) {
    // 属性が存在する
}

aria-* / role 属性

アクセシビリティ関連の属性も普通の HTML 属性なので .attr() で操作します。動的な UI では特に頻出。

// ドロップダウンを展開
$("#menu-btn").attr({
    "aria-expanded": "true",
    "aria-controls": "menu-list"
});

// タブの選択状態切替
$(".tab").attr("aria-selected", "false");
$(".tab.active").attr("aria-selected", "true");

複数要素への一括操作

.attr(name, value) は該当する全要素に適用されます。

// すべての img に loading="lazy" を付与
$("img").attr("loading", "lazy");

// 全ての外部リンクに rel="noopener"
$('a[href^="http"]').attr("rel", "noopener noreferrer");

関数形式での個別計算

各要素ごとに異なる値を設定したい場合、関数を渡せます。第1引数はインデックス、第2引数は現在値です。

// 各画像の alt にインデックス番号を入れる
$("img.gallery").attr("alt", function (index, currentAlt) {
    return (currentAlt || "image") + " #" + (index + 1);
});

// 既存 href にクエリパラメータを追加
$("a.tracked").attr("href", function (index, href) {
    if (!href) return href;
    const sep = href.includes("?") ? "&" : "?";
    return href + sep + "utm_source=newsletter";
});

カスタム data-* 属性での状態管理

UI の状態を data-* 属性で持たせ、CSS のスタイル切替に使うパターンもよく使われます。

// HTML: 切替
// CSS:  button[data-mode="dark"] { background:#222; color:#fff; }

$("#theme").on("click", function () {
    const current = $(this).attr("data-mode");
    const next = current === "light" ? "dark" : "light";
    $(this).attr("data-mode", next);
});

FAQ

Q: jQuery 1.6 未満では？
A: 旧バージョンには .prop() がなく .attr("checked", true) で動作していました。1.6 以降は明確に分離されたため、現代の jQuery では .prop() を使うのが正解です。

Q: jQuery を使わずに同じことをしたい
A: ネイティブ DOM API の getAttribute / setAttribute / removeAttribute で同等のことができます。

Q: 属性名を変数で渡したい
A: $(sel).attr(name, value) の name に変数を渡すだけです。例: const k = "data-id"; $(sel).attr(k, 42);

Q: .attr() で SVG 属性も操作できる？
A: 可能です。cx / cy / fill など SVG 固有の属性も同じ書き方で取得・設定できます。

関連

• .prop() — 動的プロパティの取得/設定
• .removeAttr() — 属性削除
• .data() — data-* 属性の高機能アクセサ
• .addClass() / .removeClass() — class 属性専用
• .val() — フォーム要素の value 専用
• .css() — style 属性の中身を扱う