HTML id

2021-06-19 11:18 更新

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

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

使用 id 屬性

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

?id? 屬性用于指向樣式表中的特定樣式聲明。JavaScript 也可使用它來(lái)訪問(wèn)和操作擁有特定 ID 的元素。

id 的語(yǔ)法是：寫(xiě)一個(gè)井號(hào) (#)，后跟一個(gè) ?id? 名稱(chēng)。然后，在花括號(hào) {} 中定義 CSS 屬性。

下面的例子中我們有一個(gè) ?<h1>? 元素，它指向 ?id? 名稱(chēng) "myHeader"。這個(gè) ?<h1>? 元素將根據(jù) head 部分中的 ?#myHeader? 樣式定義進(jìn)行樣式設(shè)置：

實(shí)例

<!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>

注釋?zhuān)篿d 名稱(chēng)對(duì)大小寫(xiě)敏感！

注釋?zhuān)篿d 必須包含至少一個(gè)字符，且不能包含空白字符（空格、制表符等）。

Class 與 ID 的差異

同一個(gè)類(lèi)名可以由多個(gè) HTML 元素使用，而一個(gè) id 名稱(chēng)只能由頁(yè)面中的一個(gè) HTML 元素使用：

實(shí)例

<style>
/* 設(shè)置 id 為 "myHeader" 的元素的樣式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 設(shè)置類(lèi)名為 "city" 的所有元素的樣式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 擁有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 擁有相同類(lèi)名的多個(gè)元素 -->
<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>

提示：請(qǐng)?jiān)谖覀兊?nbsp;CSS教程 中學(xué)習(xí)更多 CSS 知識(shí)。

通過(guò) ID 和鏈接實(shí)現(xiàn) HTML 書(shū)簽

HTML 書(shū)簽用于讓讀者跳轉(zhuǎn)至網(wǎng)頁(yè)的特定部分。

如果頁(yè)面很長(zhǎng)，那么書(shū)簽可能很有用。

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

然后，當(dāng)單擊鏈接時(shí)，頁(yè)面將滾動(dòng)到帶有書(shū)簽的位置。

實(shí)例

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

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

然后，在同一張頁(yè)面中，向這個(gè)書(shū)簽添加一個(gè)鏈接（“跳轉(zhuǎn)到第四章”）：

實(shí)例

<a href="#C4">跳轉(zhuǎn)到第四章</a>

或者，在另一張頁(yè)面中，添加指向這個(gè)書(shū)簽的鏈接（“跳轉(zhuǎn)到第四章”）：

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

在 JavaScript 中使用 id 屬性

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

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

實(shí)例

使用 id 屬性通過(guò) JavaScript 來(lái)處理文本：

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

提示：請(qǐng)?jiān)谖覀兊?nbsp;JavaScript教程 中學(xué)習(xí) JavaScript。

本章總結(jié)

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)