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

对于每个 HTML 元素，`id` 属性指定一个特殊的 ID。`id` 属性的值在整个 HTML 内容中必须是唯一的。样式表中的特定样式声明使用 `id` 属性进行引用。JavaScript 也使用它来访问和修改具有给定 ID 的元素。

以下是示例……

示例

在下面的示例中，我们使用 `<h1>` 指向 ID 名称“tutorial”。此 `<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”。

Yaswanth Varma

更新于：2022年9月5日

1K+ 次查看

启动您的职业生涯

完成课程获得认证

开始学习