jQuery HTML 屬性：attr() 與 removeAttr()

讀取、設定與移除 HTML 相關屬性，是 jQuery DOM 操作 中最基本的一組方法。

attr()

讀取

選取指定元素的屬性並取出值。

attr(attribute);

參數

功能	說明	型別	範例	備註
attribute	屬性	String	'id'、'class'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

const idStr = $('#Dom').attr('id');

// Dom
console.log(idStr);

讀不到會拿到 undefined

屬性不存在時回傳 undefined，選不到任何元素時也是。想觀察結果，可以搭配 輸出 檢查。

設定一個 HTML 屬性

選取指定元素並設定屬性、值。

attr(attribute, value);

參數

功能	說明	型別	範例	備註
attribute	屬性	String	'class'	必填
value	值	String	'dom'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').attr('class', 'dom');

改樣式不要用 attr 換 class

直接用 attr('class', ...) 會覆蓋掉元素原本的所有類別。要新增或移除單一類別，請改用 addClass() 與 removeClass() 。

設定多個 HTML 屬性

選取指定元素並設定多個屬性、值。

attr(attributes);

參數

功能	說明	型別	範例	備註
attributes	多個屬性	Object	{ class: 'img-resp' }	必填

範例

一次補上 <img> 的來源與替代文字。

HTML

<img id="Img">

JavaScript

$('#Img').attr({
  src: './images/jquery.png',
  alt: 'Hello jQuery',
  style: 'border: solid 1px yellowgreen',
});

removeAttr()

選取元素並移除指定的屬性。

removeAttr(attribute);

參數

功能	說明	型別	範例	備註
attribute	屬性	String	'class'	必填

範例

HTML

<div id="Dom" class="dom">DOM</div>

JavaScript

$('#Dom').removeAttr('class');

常見問題

attr 什麼時候是讀取、什麼時候是設定？

只給屬性名時是讀取，會回傳字串；再多給一個值就變成設定。想一次設定多個屬性，則改傳一個物件。

設定多個屬性時，物件要怎麼寫？

以屬性名為鍵、屬性值為值，例如：同時給 圖片 的 src 與 alt。屬性名如果含有連字號，記得用引號包起來。

attr 讀不到值會回傳什麼？

該屬性不存在時回傳 undefined，選不到任何元素時也是。判斷屬性是否存在時要留意這一點。

attr 和 prop 差在哪？

attr() 讀的是 HTML 標籤上寫的屬性值，prop() 讀的是 DOM 物件 當下的屬性狀態。像 checkbox 的勾選狀態會變動，這種情況應該用 prop()。

removeAttr 可以一次移除多個屬性嗎？

可以，把屬性名以空白隔開寫在同一個字串裡即可。要注意移除 class 屬性會把該元素所有類別一併清空。

延伸閱讀

CSS 樣式屬性CSS 類別什麼是 DOM 操作？節點的屬性

參考資料：jQuery API：.attr()