jQuery｢attr｣で属性値を取得/設定する方法

2020年4月24日

jQueryのメソッド「.attr() 」は、要素の「属性値を取得/設定する」事ができるメソッド。

今回は、jQueryで「属性値を取得/設定できる」メソッド「.attr()」について、その使い方をサンプルを交えて解説しよう。

属性、属性値とは？

.attr()で属性の値を取得できるという事だが、「属性」とは何を指すのか？

例えば、次のHTMLで属性にあたるものはどれだろうか？

<ul id="nav">
 <li class="current"><a href="https://test.com" target="_blank">リンク１</a></li>
</ul>

属性

このHTMLで「属性」にあたるものは、idやclassやhrefやtargetなどである。

属性値

idの属性値はnav、classの属性値はcurrent、hrefの属性値はhttps://test.com、targetの属性値は_blankということになる。

.attr()と.prop()の違いは？

.attr()は「属性」、.prop()は「プロパティ」を操作できるメソッドで、ほとんど同じような働きをする。

属性・プロパティとは

「属性」はHTMLの情報で、「プロパティ」は「JavaScriptが独自に保持するHTMLの属性情報」で、基本的には同じ内容の情報なのだが、次の例のように一部異なるものがある。

.attr()はHTML属性を取得・設定できるメソッドで、「実行時点でHTMLコードに記述されている情報」しか取得できないので、フォームのcheckedやdisabledやselectedやmultipleなどユーザーの操作後の値を取る事はできなかった。

そこで、jQuery1.6より新たに、JavaScriptが保有する「プロパティ」を操作できる.prop()メソッドが追加されたのだ。

例えば次のようなチェックボックスで初期値でチェックが入っていないものを.prop()と.attr()でそれぞれ値を取得してみると

<input type="checkbox" >

.prop()は「false」と返すのに対して、.attr()では「undefined」と返す。

その後、ユーザーがチェックを入れた後に同じ様に.prop()と.attr()でそれぞれ値を取得してみると、.prop()は「true」と返すのに対して、.attr()では、チェックが入っているのにも関わらず、また「undefined」と返してしまう（ユーザーがチェックを入れてもHTMLが書き換わるわけではない為）。

つまり、フォーム関連やcheckedやdisabledやselectedなどの場合は、.attr()ではなく、.prop()を使って操作すると良いという事だ。

.prop()メソッドについて詳しく知りたい方はこちらの記事をどうぞ。

▶ jQuery｢prop｣でプロパティの値を取得/設定

jQueryのメソッド「.prop()」は、要素の「プロパティ値を取得/設定する」事ができるメソッド。今回は、jQu…

.attr()の構文

.attr()では属性値を「取得」と「設定」ができる。また、「一度に複数の属性の値」を設定する事もできるので、順番に解説していこう。

属性値を取得する構文

.attr()で属性値を取得する構文

$("セレクタ").attr("属性名");

セレクタで指定した要素に対して.attr()のパラメータで「属性名」だけを記述した場合は、その属性値を取得できる。

ただし「取得」した値を、後で使う場合は、次のように変数に格納すると良い。

var hoge = $("a").attr("src");

属性値を設定する構文

.attr()で属性値を設定する構文

$("セレクタ").attr("属性名","属性値");

属性値を変更したい要素を「セレクタ」で指定し、.attr()のパラメータの第１引数で「属性名」、さらに,で区切った後の第２引数で「属性値」を指定する事で、指定要素の「属性値」を変更する事ができる。

一度に複数の属性値を設定する構文

.attr()で複数の属性値を設定する構文

$("セレクタ").attr({属性名:"値",属性名:"値",属性名:"値"});

一度に複数の属性の値をセットする場合はオブジェクト形式で{}の中で属性名:"値",の組み合わせを複数設定する事ができる！

jQueryで.attr()を使って属性値を取得して、その値を設定する例

まずaタグのhrefの値を取得して、その値を別のaタグに設定する例で見ていこう。

jQuery

$(function(){
 var seturl = $("#nav a").attr("href");
 $("#set a").attr("href", seturl);
});

HTML （jQuery反映前）

<div id="nav">
 <a href="https://www.yahoo.co.jp/">リンク１</a>
</div>
<div id="set">
 <a href="https://www.msn.com/ja-jp">リンク２</a>
</div>

HTML （jQuery反映後）

<div id="nav">
 <a href="https://www.yahoo.co.jp/">リンク１</a>
</div>
<div id="set">
 <a href="https://www.yahoo.co.jp/">リンク２</a>
</div>

このように書く事で$("#nav a")の「hrefの値」を、一旦変数seturlに格納した上で、さらに$("#set a")の「hrefの値」をhttps://www.msn.com/ja-jpからhttps://www.yahoo.co.jp/に変更することができる。

jQueryで.attr()を使って、一度に複数の属性値を設定する方法

一度に複数の属性値を設定する例として、aタグのhrefとtargetとclassの３つの値を設定する例で見ていこう。

jQuery

$(function(){
 $("#set a").attr({href:"https://www.yahoo.co.jp/", target:"_blank",class:"other"});
});

HTML （jQuery反映前）

<div id="set">
 <a href="https://www.msn.com/ja-jp">リンク</a>
</div>

HTML （jQuery反映後）

<div id="set">
 <a href="https://www.yahoo.co.jp/" target="_blank" class="other">リンク１</a>
</div>

このように書く事で、aタグのhrefとtargetとclassの３つの値を一度に設定する事ができる！

属性を削除する方法

.attr()とは逆に「属性を削除」する場合は、.removeAttr()メソッドを使う事になる。

.removeAttr()についてはこちらの記事を参考にしよう。

▶ jQuery｢removeAttr｣で要素の属性を削除する方法

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント