HTML id
文章目錄
- 使用 id 屬性
- Class 與 ID 的差異
- 通過 ID 和鏈接實現 HTML 書簽
- 在 JavaScript 中使用 id 屬性
- 注意點：
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 元素使用：
<!DOCTYPE html> <html> <head> <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></body> </html>通過 ID 和鏈接實現 HTML 書簽
HTML 書簽用于讓讀者跳轉至網頁的特定部分
如果頁面很長，那么書簽可能很有用
要使用書簽，您必須首先創建它，然后為它添加鏈接
然后，當單擊鏈接時，頁面將滾動到帶有書簽的位置
- 首先，用 ?id? 屬性創建書簽：
- 然后，在同一張頁面中，向這個書簽添加一個鏈接（“跳轉到第四章”）
- 或者，在另一張頁面中，添加指向這個書簽的鏈接（“跳轉到第四章”）
在 JavaScript 中使用 id 屬性
JavaScript 也可以使用 id 屬性為特定元素執行某些任務。
JavaScript 可以使用 ?getElementById()? 方法訪問擁有特定 id 的元素：
使用 id 屬性通過 JavaScript 來處理文本：
<script> function displayResult() {document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script>注意點：
- id? 屬性用于為 HTML 元素指定唯一的 id
- ?id? 屬性的值在 HTML 文檔中必須是唯一的
- CSS 和 JavaScript 可使用 ?id? 屬性來選取元素或設置特定元素的樣式
- ?id? 屬性的值區分大小寫
- ?id? 屬性還可用于創建 HTML 書簽
- JavaScript 可以使用 ?getElementById()? 方法訪問擁有特定 id 的元素
參考鏈接：HTML id
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
