HTML id 屬性

HTML id 屬性用于 為HTML 元素指定唯一的 id。

一個 HTML文檔中不能存在多個有相同 id 的元素。

使用 id 屬性

id 屬性指定 HTML 元素的唯一 ID。 id 屬性的值在 HTML 文檔中必須是唯一的。

id 屬性用于指向樣式表中的特定樣式聲明。JavaScript 也可使用它來訪問和操作擁有特定 ID 的元素。

id 的語法是：寫一個井號 (#)，后跟一個 id 名稱。然后，在花括號 {} 中定義 CSS 屬性。

下面的例子中我們有一個 <h1> 元素，它指向 id 名稱 "myHeader"。這個 <h1> 元素將根據 head 部分中的 #myHeader 樣式定義進行樣式設置：

實例

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

親自試一試

注釋：id 名稱對大小寫敏感！

注釋：id 必須包含至少一個字符，且不能包含空白字符（空格、制表符等）。

Class 與 ID 的差異

同一個類名可以由多個 HTML 元素使用，而一個 id 名稱只能由頁面中的一個 HTML 元素使用：

實例

<style>
/* 設置 id 為 "myHeader" 的元素的樣式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* 設置類名為 "city" 的所有元素的樣式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- 擁有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>
<!-- 擁有相同類名的多個元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

親自試一試

提示：請在我們的 CSS 教程 中學習更多 CSS 知識。

通過 ID 和鏈接實現 HTML 書簽

HTML 書簽用于讓讀者跳轉至網頁的特定部分。

如果頁面很長，那么書簽可能很有用。

要使用書簽，您必須首先創建它，然后為它添加鏈接。

然后，當單擊鏈接時，頁面將滾動到帶有書簽的位置。

實例

首先，用 id 屬性創建書簽：

<h2 id="C4">第四章</h2>

然后，在同一張頁面中，向這個書簽添加一個鏈接（“跳轉到第四章”）：

實例

<a href="#C4">跳轉到第四章</a>

親自試一試

或者，在另一張頁面中，添加指向這個書簽的鏈接（“跳轉到第四章”）：

<a href="html_demo.html#C4">Jump to Chapter 4</a>

在 JavaScript 中使用 id 屬性

JavaScript 也可以使用 id 屬性為特定元素執行某些任務。

JavaScript 可以使用 getElementById() 方法訪問擁有特定 id 的元素：

實例

使用 id 屬性通過 JavaScript 來處理文本：

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

親自試一試

提示：請在 HTML JavaScript 這一章中，或我們的 JavaScript 教程 中學習 JavaScript。

本章總結

  • id 屬性用于為 HTML 元素指定唯一的 id
  • id 屬性的值在 HTML 文檔中必須是唯一的
  • CSS 和 JavaScript 可使用 id 屬性來選取元素或設置特定元素的樣式
  • id 屬性的值區分大小寫
  • id 屬性還可用于創建 HTML 書簽
  • JavaScript 可以使用 getElementById() 方法訪問擁有特定 id 的元素