如何在 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+ 查看

开启您的事业

通过完成课程获得认证

开始
广告