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