本日はJQueryのattrメソッドを使用して属性の取得と設定と削除について解説していきたいと思います。
それではいってみましょう！
Menu
属性値を取得
概要
・属性値を取得できます。
・属性がない時はundefinedを返します。
構文
attr(“属性名”)
attr属性値取得サンプル
ボタンをクリックするとhref属性値のhttps://dailyrecords.blog/を取得しコンソールに出力されます。
【HTML】
1 2 | <a href="https://dailyrecords.blog/">デイレコ</a> <button>ボタン</button> |
【JQuery】
1 2 3 4 | $('button').click(function(){ let myHref= $("a").attr("href"); console.log(myHref); }); |
ブラウザのコンソールでhttps://dailyrecords.blog/が取得できてるのが確認できます。
属性値を設定
概要
属性名を指定して属性値を設定できます。
構文
attr(“属性名”,”設定したい属性値”)
attr属性の設定サンプル
alt属性に属性値を設定する場合
【HTML】
1 2 | <a href="https://dailyrecords.blog/" alt="">デイレコ</a> <button>ボタン</button> |
【JQuery】
1 2 3 | $('button').click(function(){ $('a').attr('alt','DaylyRecord'); }); |
ボタンをクリックするとalt属性値にDaylyRecordが設定されます＼(^^)／
属性値を複数設定する場合
概要
オブジェクトを作成することにより複数まとめて属性を設定することもできます。
構文
attr(object)
attr(object)複数設定サンプル
hrefとaltとtargetの3つの属性をまとめて設定する場合
【HTML】
1 2 | <a>デイレコ</a> <button>ボタン</button> |
【JQuery】
1 2 3 4 5 6 7 8 9 10 | //属性オブジェジェクト作成 atrObj = new Object(); atrObj.href = "https://dailyrecords.blog/"; atrObj.alt = "デイレコ"; atrObj.target = "_blank"; //ボタンクリックでまとめて設定 $('button').click(function(){ $('a').attr(atrObj); }); |
ボタンをクリックするとhrefとaltとtarget属性の3つが同時に設定されます(*^^)v
属性を削除
概要
属性を削除します。
構文
removeAttr(“属性名”)
removeAttr属性削除サンプル
alt属性を削除する場合
【HTML】
1 2 | <a href="https://dailyrecords.blog/" alt="デイレコ">デイレコ</a> <button>ボタン</button> |
【JQuery】
1 2 3 | $('button').click(function(){ $('a').removeAttr('alt'); }); |
ボタンをクリックすると下記のようにalt=”デイレコ”のalt属性が削除されます。
まとめ
サイトのページが何ページもあり修正しなくてはいけない時に、この技術を身に着けておけば一気に修正が可能です。
あとは目的の要素がわかってしまえば、簡単に修正がかけられるので非常に便利です。
以上です。
