HTML | ID 属性

在 HTML 中，ID 属性用于为 HTML 元素定义唯一的标识符（ID）。ID 可以用于标识文档中的特定元素，并在 JavaScript 和 CSS 中被用作选择器。

语法

ID 属性是在 HTML 元素的开始标签中使用的，格式如下：

<tagname id="uniqueID">

在其中：

• tagname 指 HTML 元素的标签名称，如 div、p、ul 等。
• id 指 ID 属性的名称。
• uniqueID 是唯一的元素标识符。它应该是文档中唯一的，并且只能包含字母、数字、下划线、破折号、点号和冒号字符。ID 名称不能以数字开头。

示例

以下示例演示如何在 HTML 中为元素定义 ID 属性：

<h1 id="page-title">Welcome to my website</h1>
<p id="introduction-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div id="main-content">
  <h2>Top Stories</h2>
  <ul id="story-list">
    <li>Story 1</li>
    <li>Story 2</li>
    <li>Story 3</li>
  </ul>
</div>

在上面的示例中，我们为不同的 HTML 元素定义了 ID 属性。这些 ID 可以在 JavaScript 或 CSS 中被用作选择器，以便更灵活地操作文档中的元素。

JavaScript 中使用 ID

在 JavaScript 中，可以使用 document.getElementById() 方法来获取具有特定 ID 的元素。以下示例演示了如何获取 ID 为 main-content 的 div 元素：

var element = document.getElementById("main-content");

返回的变量 element 是一个 DOM 元素对象，您可以使用 JavaScript 操作它。

CSS 中使用 ID

在 CSS 中，可以使用 ID 选择器来选择具有特定 ID 的元素。以下示例演示如何选择 ID 为 page-title 的 h1 元素并设置文本颜色：

#page-title {
  color: red;
}

在上面的示例中，我们使用 # 符号引用了 ID 选择器。这允许我们选择具有该 ID 的元素并将 CSS 样式应用于它。

总结

在 HTML 中使用 ID 属性，可以为元素定义唯一的标识符，并在 JavaScript 和 CSS 中用作选择器。这使得操作文档中的元素更加灵活和方便。ID 属性的名称应该是唯一的，并且只能包含字母、数字、下划线、破折号、点号和冒号字符。