HTML id 屬性用(yòng)于 爲HTML 元素指定唯一的 id。
一個 HTML文(wén)檔中不能(néng)存在多個有相同 id 的元素。
使用(yòng) id 屬性
id 屬性指定 HTML 元素的唯一 ID。 id 屬性的值在 HTML 文(wén)檔中必須是唯一的。
id 屬性用(yòng)于指向樣式表中的特定樣式聲明(míng)。JavaScript 也(yě)可使用(yòng)它來(lái)訪問和(hé)操作(zuò)擁有特定 ID 的元素。
id 的語法是：寫一個井号 (#)，後跟一個 id 名稱。然後，在花(huā)括号 {} 中定義 CSS 屬性。
下(xià)面的例子中我們有一個 <h1> 元素，它指向 id 名稱 "myHeader"。這(zhè)個 <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 名稱對(duì)大(dà)小(xiǎo)寫敏感！
注釋：id 必須包含至少一個字符，且不能(néng)包含空(kōng)白(bái)字符（空(kōng)格、制表符等）。
Class 與 ID 的差異
同一個類名可以由多個 HTML 元素使用(yòng)，而一個 id 名稱隻能(néng)由頁面中的一個 HTML 元素使用(yòng)：
實例
<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>
通過 ID 和(hé)鏈接實現(xiàn) HTML 書簽
HTML 書簽用(yòng)于讓讀者跳轉至網頁的特定部分。
如果頁面很(hěn)長，那麽書簽可能(néng)很(hěn)有用(yòng)。
要使用(yòng)書簽，您必須首先創建它，然後爲它添加鏈接。
然後，當單擊鏈接時(shí)，頁面将滾動到(dào)帶有書簽的位置。
實例
首先，用(yòng) id 屬性創建書簽：
<h2 id="C4">第四章</h2>
然後，在同一張頁面中，向這(zhè)個書簽添加一個鏈接（“跳轉到(dào)第四章”）：
實例
<a href="#C4">跳轉到(dào)第四章</a>
或者，在另一張頁面中，添加指向這(zhè)個書簽的鏈接（“跳轉到(dào)第四章”）：
<a href="html_demo.html#C4">Jump to Chapter 4</a>
在 JavaScript 中使用(yòng) id 屬性
JavaScript 也(yě)可以使用(yòng) id 屬性爲特定元素執行某些(xiē)任務。
JavaScript 可以使用(yòng) getElementById() 方法訪問擁有特定 id 的元素：
實例
使用(yòng) id 屬性通過 JavaScript 來(lái)處理(lǐ)文(wén)本：
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發