如何在 HTML 中為元素指定一個唯一的 ID？

對於每個 HTML 元素，id 屬性指定一個特殊的 id。id 屬性的值在整個 HTML 內容中必須是唯一的。使用 id 屬性引用樣式表中特定樣式宣告。Javascript 也使用它訪問和修改具有給定 id 的元素。

以下示例…

示例

在下面的示例中，我們使用指向 id 名稱“tutorial”的 <h1> 元素。此 <h1> 元素將根據 #tutorial 進行樣式化。

<!DOCTYPE html>
<html>
<head>
   <style>
      #tutorial {
         background-color: lightblue;
         color: black;
         padding: 40px;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 id="tutorial">Welcome Everyone..</h1>
</body>
</html>

輸出

執行上述指令碼後，具有 id “tutorial”的元素將根據 #tutorial 進行樣式化。

示例：使用 Javascript

Javascript 使用唯一的 id 並操作具有給定 id 的元素。

<!DOCTYPE HTML>
<html>
<body>
   <h1 id="tutorial">Hello</h1>
   <button onclick="displayResult()">change text</button>
   <script>
      function displayResult() {
         document.getElementById("tutorial").innerHTML = "WELCOME";
      }
   </script>
</body>
</html>

輸出

當你第一次嘗試執行指令碼時，它將顯示文字 “hello”。

點選更改文字按鈕後，文字 “hello” 將更改為 “welcome”。

更新於：2022-09-05

1K+ 檢視

開啟您的事業

透過完成課程獲得認證

開始
廣告