HTML id 屬性
阿新 • • 發佈：2022-12-13
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>
通過 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>