HTML - id

id 是 HTML 中一個重要的關鍵字。HTML“id”是一個屬性，用於在網頁中唯一標識一個元素。它充當該元素的標籤，並使 JavaScript 和 CSS 能夠專門定位它。

HTML id 屬性 在 HTML 程式碼中使用“id”關鍵字定義，樣式在 CSS 中確定。此標識有助於應用自定義樣式、建立互動式功能以及精確地在網頁內導航。“id”值在文件中必須唯一。

我們強烈建議您使用類透過 CSS 對任何元素進行樣式設定。

id 語法

在 CSS 中，您可以透過使用井號 (#) 後跟 HTML 元素中 id 名稱來定位 id 屬性。儘量不要在 CSS 中使用 id，而是可以使用 class 屬性。Id 是專門為透過 JavaScript 執行而建立的。

在 HTML 中

<element class="highlight">...</element>

在 CSS 中

/* CSS using id Attribute Selector */
#highlight {
   background-color: yellow;
   color: black;
   font-weight: bold;
}

在 JavaScript 中
```
document.getElementById('highlight')
```

使用 HTML id 屬性

HTML id 對於管理事件和更改文件結構至關重要。為了建立互動式和動態網頁，它使開發人員能夠定位特定部分併為其提供專門的行為和外觀。很少用於在 CSS 中進行樣式設定。

定義用於樣式設定的 id

在以下示例中，我們建立了兩個元素，一個是 h1，另一個是 p，並且我們在它們上設定了 id，分別是“header”和“heightlight”，但使用“heightlight”是在內部 CSS 中為我們的 p 元素設定樣式。您可以以類似的方式使用“header”id 為 h1 元素設定樣式。

<!DOCTYPE html>
<html>

<head>
   <style>
      <!-- CSS id attribute Selector Used -->
      #highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>

<body>
   <!-- Using id attribute in both Element -->
   <h1 id="header">Tutorialspoint</h1>
   <p id="highlight">Simply Easy Learning</p>
</body>

</html>

透過 JavaScript 使用 id 屬性

id 經常用於識別 JavaScript 函式的元素。例如，您可以使用 id 定位特定的元素，如段落，並透過 JavaScript 使其具有互動性。在以下程式碼中，我們建立了一個按鈕，它將觸發一個函式，該函式將更改段落元素的 display 屬性，從 none 變為 block。您將看到一個段落。

<!DOCTYPE html>
<html>

<head>
   <script>
      function showContent() {
         var element = document.getElementById('content');
         if (element.style.display === 'none') {
            element.style.display = 'block';
         } else {
            element.style.display = 'none';
         }
      }
   </script>
   <style>
      .interactive-button {
         background-color: #007bff;
         color: #fff;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>

<body>
   <button class="interactive-button" 
           onclick="showContent()">Click Me</button>
   <p class="content" style="display: none;">
       This content can be toggled by clicking the button.
   </p>
</body>

</html>

HTML 中 id 和 class 的區別

在 HTML 中，id 屬性唯一地標識頁面上的單個元素，使其可用於透過 CSS 和 JavaScript 進行定位，並且它在文件中必須唯一。另一方面，class 屬性可以應用於多個元素，從而允許對共享通用樣式或行為的元素進行分組。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Difference between id and class</title>
   <style>
      /* ID selector */
      #header {
         background-color: blue;
         color: white;
         padding: 10px;
      }
      /* Class selector */
      .button {
         background-color: green;
         color: white;
         padding: 5px 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
      <!-- Unique ID for the header -->
      <div id="header">
         This is the header
      </div>
      <!-- Shared class for buttons -->
      <div class="button">
         Button 1
      </div>
      <div class="button">
         Button 2
      </div>
</body>

</html>

關於 id 的注意事項

id 屬性應至少包含一個字元，起始字母應為字元 (a-z) 或 (A-Z)，其餘字母可以是任何型別，甚至可以是特殊字元。
id 屬性不包含任何空格。
在文件中，每個 id 必須唯一。

有效的 id 屬性模式

某些 ID 屬性在 HTML 5 中有效，但在層疊樣式表中無效。在這種情況下，建議使用簡單輸出而不是樣式化輸出，因為我們用於 ID 的某些值在 CSS 中可能無效。

以下示例演示了簡單 ID 屬性的使用。

示例

如果我們執行以下程式碼，將顯示兩個 div 元素，一個帶有 id 屬性 (TutorialsPoint 網站)，另一個帶有其他 id 屬性 (Html5 教程、CSS 教程、JavaScript 教程)。

<!DOCTYPE html>
<html>

<head>
   <title>Simple Id Attributes</title>
   <style>
      /* Remove @ from the code and run the code again */
      #@TP {
         color: #070770;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
      }
      #@TP1 {
         text-align: center;
         font-size: 25px;
      }
   </style>
</head>

<body>
   <div id="@TP">
      TutorialsPoint Website
   </div>
   <div id="@TP1"> 
      Html5 Tutorials, CSS Tutorials, JavaScript Tutorials 
   </div>
</body>
</html>

如果我們從 id 的值中刪除 @ 符號，它將成為有效的 id 宣告，並且應用的樣式將對 HTML 元素產生影響。

列印頁面