HTML - 全局 id 属性

HTML 的 id 是一个全局属性，用于在文档中唯一标识一个元素，允许 CSS 或 JavaScript 用于样式或操作目的。

“id”属性应在 HTML 文档中唯一，以确保正常的功能并遵守 Web 标准。id 的名称在 CSS 中由 "#" 关键字引用，在 JavaScript 中由 document.getElementById("id_name") 等 Dom 方法引用。

语法

<element id = "id_name" >

id_name 可以是任何内容，但不要在其他元素上使用相同的 id。

应用于

Id 属性是一个全局属性，这意味着它几乎所有 HTML 标签都支持。但是，像 <html>、<head> 这样的结构标签不支持 id 标签。

HTML id 属性示例

以下示例将说明 HTML id 属性，以及我们应该在哪里以及如何使用此属性！

应用于段落的 Id 标签

在以下示例中，我们正在创建一个 HTML 文档并使用 id 属性来设置元素内容的样式，如下所示：

<!DOCTYPE html>
<html>

<head>
<style>
   #exciting {
      background-color: orange;
      border: 1px solid #696969;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 2px 2px 1px black;
   }

   #exciting:before {
      content: 'ℹ️';
      margin-right: 5px;
   }
</style>
</head>

<body>
   <p>
      This is a Normla Text
   </p>
   <p id="exciting">
      HTML id attribute used on this content
   </p>
</body>

</html>

通过 Id 属性选择元素

让我们看看下面的示例，我们将运行脚本并在单击按钮时使用 id 属性更改段落的背景颜色。

<!DOCTYPE html>
<html>

<body>
   <p>This is a paragraph</p>
   <p id="myPara">
      HTML id is global attribute used to uniquely 
      identify an element within a document, allowing 
      it to be targeted by CSS or JavaScript for styling 
      or manipulation purposes.
   </p>
   <button type="button" 
      onclick="changeBackground()">
         change background
   </button>
   <script>
      function changeBackground() {
         var para = document.getElementById("myPara");
         para.style.backgroundColor = "grey";
      }
   </script>
</body>

</html>

支持的浏览器

属性
id	是	是	是	是	是

html_attributes_reference.htm

打印页面