.attr()

類別：屬性 | 操作 > 一般屬性
取得相符元素集合中第一個元素的屬性值，或為每個相符元素設定一個或多個屬性。

內容

.attr( attributeName )傳回：字串

說明：取得相符元素集合中第一個元素的屬性值。

.attr() 方法僅取得匹配組中第一個元素的屬性值。若要個別取得每個元素的值，請使用迴圈結構，例如 jQuery 的 .each() 或 .map() 方法。

使用 jQuery 的 .attr() 方法取得元素屬性的值有兩個主要好處

  1. 便利性：它可以直接在 jQuery 物件上呼叫，並與其他 jQuery 方法串連。
  2. 跨瀏覽器一致性：某些屬性的值在不同瀏覽器中回報不一致，甚至在同一個瀏覽器的不同版本中也不一致。.attr() 方法減少了此類不一致性。

注意：屬性值為字串，但少數屬性例外，例如 value 和 tabindex。

從 jQuery 1.6 開始，.attr() 方法會為未設定的屬性回傳 undefined。若要擷取和變更 DOM 屬性，例如表單元素的 checked、selected 或 disabled 狀態，請使用 .prop() 方法。

屬性與特性的差異

在特定情況下，屬性和特性之間的差異可能很重要。在 jQuery 1.6 之前，.attr() 方法在擷取某些屬性時，有時會考慮特性值，這可能會導致行為不一致。從 jQuery 1.6 開始，.prop() 方法提供了一種明確擷取特性值的方法，而 .attr() 則擷取屬性。

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected 應該使用 .prop() 方法來擷取和設定。在 jQuery 1.6 之前，這些特性可以使用 .attr() 方法擷取，但這不屬於 attr 的範圍。這些特性沒有對應的屬性，只有特性。

關於布林屬性，考慮由 HTML 標記 <input type="checkbox" checked="checked" /> 定義的 DOM 元素，並假設它在名為 elem 的 JavaScript 變數中

elem.checked true (布林) 將隨核取方塊狀態而改變
$( elem ).prop( "checked" ) true (布林) 將隨核取方塊狀態而改變
elem.getAttribute( "checked" ) "checked" (字串) 核取方塊的初始狀態；不會改變
$( elem ).attr( "checked" ) (1.6+) "checked" (字串) 核取方塊的初始狀態；不會改變
$( elem ).attr( "checked" ) (pre-1.6) true (布林) 隨核取方塊狀態而改變

根據 W3C 表單規範，checked 屬性是一個 布林屬性，這表示如果屬性存在，則對應的屬性為 true，即使屬性沒有值或設定為空字串值，甚至為「false」也是如此。所有布林屬性皆是如此。

然而，關於 checked 屬性最重要的概念是，它不對應於 checked 屬性。該屬性實際上對應於 defaultChecked 屬性，且應僅用於設定核取方塊的 初始 值。checked 屬性值不會隨核取方塊的狀態而改變，但 checked 屬性會。因此，判斷核取方塊是否已勾選的跨瀏覽器相容方式是使用屬性

  • if ( elem.checked )
  • if ( $( elem ).prop( "checked" ) )
  • if ( $( elem ).is( ":checked" ) )

其他動態屬性，例如 selected 和 value，也是如此。

其他注意事項

  • 在版本 9 之前的 Internet Explorer 中，使用 .prop() 將 DOM 元素屬性設定為非簡單原始值（數字、字串或布林值）可能會造成記憶體外洩，如果在從文件中移除 DOM 元素之前沒有移除屬性（使用 .removeProp()），就會發生這種情況。若要在沒有記憶體外洩的情況下安全地設定 DOM 物件的值，請使用 .data()。

範例

在變更時顯示核取方塊的 checked 屬性和特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" )
  .on( "change", function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  } )
  .trigger( "change" );
</script>
 
</body>
</html>

示範

找出頁面中第一個 <em> 的 title 屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
 
The title of the emphasis is:<div></div>
 
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
 
</body>
</html>

示範

.attr( attributeName, value )傳回：jQuery

說明：設定一組已匹配元素的一個或多個屬性。

.attr() 方法是設定屬性值的便利方法，特別是在設定多個屬性或使用函式傳回的值時。請考慮下列圖片

1
 
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller">

設定簡單屬性

若要變更 alt 屬性，只要傳遞屬性的名稱和新值給 .attr() 方法

1
 
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

新增 屬性方式相同

1
 
$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );

一次設定多個屬性

若要同時變更 alt 屬性和新增 title 屬性，請一次將兩組名稱和值傳遞到方法中，使用純 JavaScript 物件。物件中的每個鍵值配對會新增或修改一個屬性

1
2
3
4
 
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

設定多個屬性時，屬性名稱周圍的引號是選用的。

警告：設定「class」屬性時，您必須始終使用引號！

注意：嘗試變更透過 document.createElement() 建立的 input 或 button 元素上的 type 屬性，會在 Internet Explorer 8 或更舊版本中擲回例外。

計算屬性值

透過使用函式設定屬性，您可以根據元素的其他屬性來計算值。例如，將新值與現有值串接

1
2
3
 
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

使用函式來計算屬性值，在一次修改多個元素的屬性時特別有用。

注意：如果設定函式中沒有傳回任何值（即 function(index, attr){}），或傳回 undefined，則不會變更目前的值。這對於僅在符合特定條件時才選擇性設定值很有用。

範例

設定頁面中所有 <img> 的一些屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "/resources/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>

示範

根據頁面中的位置設定 div 的 id。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  b {
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
 
<script>
$( "div" )
  .attr( "id", function( arr ) {
    return "div-id" + arr;
  })
  .each(function() {
    $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
 
</body>
</html>

示範

從圖片上的標題屬性設定 src 屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "/resources/" + this.title;
});
</script>
 
</body>
</html>

示範