HTML id

2021-06-19 11:18 更新

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 和鏈接實現(xiàn) HTML 書簽

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

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

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

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

實例

首先，用 ?id? 屬性創(chuàng)建書簽：

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

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

實例

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

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

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

在 JavaScript 中使用 id 屬性

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

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

實例

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

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

提示：請在我們的 JavaScript教程 中學習 JavaScript。

本章總結

  • ?id? 屬性用于為 HTML 元素指定唯一的 id
  • ?id? 屬性的值在 HTML 文檔中必須是唯一的
  • CSS 和 JavaScript 可使用 ?id? 屬性來選取元素或設置特定元素的樣式
  • ?id? 屬性的值區(qū)分大小寫
  • ?id? 屬性還可用于創(chuàng)建 HTML 書簽
  • JavaScript 可以使用 ?getElementById()? 方法訪問擁有特定 id 的元素
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號