jQuery DOM 操控術 - HTML 屬性

讀取、設定與移除 HTML 相關屬性。

attr()

讀取

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

attr(attribute)

參數

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

範例

HTML

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

JavaScript

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

// Dom
console.log(idStr);

設定一個 HTML 屬性

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

attr(attribute, value)

參數

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

範例

HTML

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

JavaScript

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

設定多個 HTML 屬性

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

attr(attributes)

參數

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

範例

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');